diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance')
110 files changed, 2876 insertions, 4403 deletions
diff --git a/packages/merchant-backoffice-ui/src/paths/instance/accounts/create/Create.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/accounts/create/Create.stories.tsx index 3336c53a4..50cd801d8 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/accounts/create/Create.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/accounts/create/Create.stories.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 diff --git a/packages/merchant-backoffice-ui/src/paths/instance/accounts/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/accounts/create/CreatePage.tsx index 6e4786a47..d05375b6c 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/accounts/create/CreatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/accounts/create/CreatePage.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,6 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { TalerMerchantApi } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; @@ -30,66 +31,89 @@ import { import { Input } from "../../../../components/form/Input.js"; import { InputPaytoForm } from "../../../../components/form/InputPaytoForm.js"; import { InputSelector } from "../../../../components/form/InputSelector.js"; -import { MerchantBackend } from "../../../../declaration.js"; import { undefinedIfEmpty } from "../../../../utils/table.js"; +import { safeConvertURL } from "../update/UpdatePage.js"; -type Entity = MerchantBackend.BankAccounts.AccountAddDetails & { repeatPassword: string }; +type Entity = TalerMerchantApi.AccountAddDetails & { repeatPassword: string }; interface Props { - onCreate: (d: Entity) => Promise<void>; + onCreate: (d: TalerMerchantApi.AccountAddDetails) => Promise<void>; onBack?: () => void; } const accountAuthType = ["none", "basic"]; -function isValidURL(s: string): boolean { - try { - const u = new URL(s) - return true; - } catch (e) { - return false; - } -} - export function CreatePage({ onCreate, onBack }: Props): VNode { const { i18n } = useTranslationContext(); const [state, setState] = useState<Partial<Entity>>({}); + const facadeURL = safeConvertURL(state.credit_facade_url); const errors: FormErrors<Entity> = { payto_uri: !state.payto_uri ? i18n.str`required` : undefined, credit_facade_credentials: !state.credit_facade_credentials ? undefined : undefinedIfEmpty({ - username: - state.credit_facade_credentials.type === "basic" && !state.credit_facade_credentials.username - ? i18n.str`required` - : undefined, - password: - state.credit_facade_credentials.type === "basic" && !state.credit_facade_credentials.password - ? i18n.str`required` - : undefined, - }), + username: + state.credit_facade_credentials.type === "basic" && + !state.credit_facade_credentials.username + ? i18n.str`required` + : undefined, + password: + state.credit_facade_credentials.type === "basic" && + !state.credit_facade_credentials.password + ? i18n.str`required` + : undefined, + }), credit_facade_url: !state.credit_facade_url ? undefined - : !isValidURL(state.credit_facade_url) ? i18n.str`not valid url` + : !facadeURL + ? i18n.str`Invalid url` + : !facadeURL.href.endsWith("/") + ? i18n.str`URL should end with a '/'` + : facadeURL.searchParams.size > 0 + ? i18n.str`URL should not contain params` + : facadeURL.hash + ? i18n.str`URL should not hash param` + : undefined, + repeatPassword: !state.credit_facade_credentials + ? undefined + : state.credit_facade_credentials.type === "basic" && + (!state.credit_facade_credentials.password || + state.credit_facade_credentials.password !== state.repeatPassword) + ? i18n.str`is not the same` : undefined, - repeatPassword: - !state.credit_facade_credentials - ? undefined - : state.credit_facade_credentials.type === "basic" && (!state.credit_facade_credentials.password || state.credit_facade_credentials.password !== state.repeatPassword) - ? i18n.str`is not the same` - : undefined, }; const hasErrors = Object.keys(errors).some( - (k) => (errors as any)[k] !== undefined, + (k) => (errors as Record<string, unknown>)[k] !== undefined, ); const submitForm = () => { if (hasErrors) return Promise.reject(); - delete state.repeatPassword - return onCreate(state as any); + const credit_facade_url = !state.credit_facade_url + ? undefined + : facadeURL?.href; + const credit_facade_credentials: + | TalerMerchantApi.FacadeCredentials + | undefined = + credit_facade_url == undefined + ? undefined + : state.credit_facade_credentials?.type === "basic" + ? { + type: "basic", + password: state.credit_facade_credentials.password, + username: state.credit_facade_credentials.username, + } + : { + type: "none", + }; + + return onCreate({ + payto_uri: state.payto_uri!, + credit_facade_credentials, + credit_facade_url, + }); }; return ( diff --git a/packages/merchant-backoffice-ui/src/paths/instance/accounts/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/accounts/create/index.tsx index 7d33d25ce..9bab33f6f 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/accounts/create/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/accounts/create/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,25 +19,37 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { Fragment, h, VNode } from "preact"; +import { + FacadeCredentials, + HttpStatusCode, + OperationFail, + OperationOk, + TalerError, + TalerMerchantApi, + TalerRevenueHttpClient, + assertUnreachable, + opFixedSuccess, +} from "@gnu-taler/taler-util"; +import { + BrowserFetchHttpLib, + useTranslationContext +} from "@gnu-taler/web-util/browser"; +import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; import { NotificationCard } from "../../../../components/menu/index.js"; -import { MerchantBackend } from "../../../../declaration.js"; -import { useWebhookAPI } from "../../../../hooks/webhooks.js"; +import { useSessionContext } from "../../../../context/session.js"; import { Notification } from "../../../../utils/types.js"; import { CreatePage } from "./CreatePage.js"; -import { useOtpDeviceAPI } from "../../../../hooks/otp.js"; -import { useBankAccountAPI } from "../../../../hooks/bank.js"; -export type Entity = MerchantBackend.BankAccounts.AccountAddDetails; +export type Entity = TalerMerchantApi.AccountAddDetails; interface Props { onBack?: () => void; onConfirm: () => void; } export default function CreateValidator({ onConfirm, onBack }: Props): VNode { - const { createBankAccount } = useBankAccountAPI(); + const { lib: api } = useSessionContext(); + const { state } = useSessionContext(); const [notif, setNotif] = useState<Notification | undefined>(undefined); const { i18n } = useTranslationContext(); @@ -46,14 +58,73 @@ export default function CreateValidator({ onConfirm, onBack }: Props): VNode { <NotificationCard notification={notif} /> <CreatePage onBack={onBack} - onCreate={(request: Entity) => { - return createBankAccount(request) - .then((d) => { - onConfirm() + onCreate={async (request: Entity) => { + const revenueAPI = !request.credit_facade_url + ? undefined + : new URL("./", request.credit_facade_url); + + if (revenueAPI) { + const resp = await testRevenueAPI( + revenueAPI, + request.credit_facade_credentials, + ); + if (resp.type === "fail") { + switch (resp.case) { + case TestRevenueErrorType.NO_CONFIG: { + setNotif({ + message: i18n.str`Could not create account`, + type: "ERROR", + description: i18n.str`The endpoint doesn't seems to be a Taler Revenue API`, + }); + return; + } + case TestRevenueErrorType.CLIENT_BAD_REQUEST: { + setNotif({ + message: i18n.str`Could not create account`, + type: "ERROR", + description: i18n.str`Server replied with "bad request".`, + }); + return; + } + case TestRevenueErrorType.UNAUTHORIZED: { + setNotif({ + message: i18n.str`Could not create account`, + type: "ERROR", + description: i18n.str`Unauthorized, try with another credentials.`, + }); + return; + } + case TestRevenueErrorType.NOT_FOUND: { + setNotif({ + message: i18n.str`Could not create account`, + type: "ERROR", + description: i18n.str`Check facade URL, server replied with "not found".`, + }); + return; + } + case TestRevenueErrorType.GENERIC_ERROR: { + setNotif({ + message: i18n.str`Could not create account`, + type: "ERROR", + description: resp.detail.hint, + }); + return; + } + default: { + assertUnreachable(resp.case); + } + } + } + } + + return api.instance + .addBankAccount(state.token, request) + .then(() => { + onConfirm(); }) .catch((error) => { setNotif({ - message: i18n.str`could not create device`, + message: i18n.str`could not create account`, type: "ERROR", description: error.message, }); @@ -63,3 +134,103 @@ export default function CreateValidator({ onConfirm, onBack }: Props): VNode { </> ); } + +export enum TestRevenueErrorType { + NO_CONFIG, + CLIENT_BAD_REQUEST, + UNAUTHORIZED, + NOT_FOUND, + GENERIC_ERROR, +} + +export async function testRevenueAPI( + revenueAPI: URL, + creds: FacadeCredentials | undefined, +): Promise<OperationOk<void> | OperationFail<TestRevenueErrorType>> { + const api = new TalerRevenueHttpClient( + revenueAPI.href, + new BrowserFetchHttpLib(), + ); + const auth = + creds === undefined + ? undefined + : creds.type === "none" + ? undefined + : creds.type === "basic" + ? { + username: creds.username, + password: creds.password, + } + : undefined; + + try { + const config = await api.getConfig(auth); + + if (config.type === "fail") { + switch (config.case) { + case HttpStatusCode.Unauthorized: { + return { + type: "fail", + case: TestRevenueErrorType.UNAUTHORIZED, + detail: { + code: 1, + }, + }; + } + case HttpStatusCode.NotFound: { + return { + type: "fail", + case: TestRevenueErrorType.NO_CONFIG, + detail: { + code: 1, + }, + }; + } + } + } + + const history = await api.getHistory(auth); + + if (history.type === "fail") { + switch (history.case) { + case HttpStatusCode.BadRequest: { + return { + type: "fail", + case: TestRevenueErrorType.CLIENT_BAD_REQUEST, + detail: { + code: 1, + }, + }; + } + case HttpStatusCode.Unauthorized: { + return { + type: "fail", + case: TestRevenueErrorType.UNAUTHORIZED, + detail: { + code: 1, + }, + }; + } + case HttpStatusCode.NotFound: { + return { + type: "fail", + case: TestRevenueErrorType.NOT_FOUND, + detail: { + code: 1, + }, + }; + } + } + } + } catch (err) { + if (err instanceof TalerError) { + return { + type: "fail", + case: TestRevenueErrorType.GENERIC_ERROR, + detail: err.errorDetail, + }; + } + } + + return opFixedSuccess(undefined); +} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/List.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/List.stories.tsx index 6b4b63735..18e762642 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/List.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/List.stories.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 diff --git a/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/ListPage.tsx index 24da755b9..4ee68cd80 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/ListPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/ListPage.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,18 +19,17 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { TalerMerchantApi } from "@gnu-taler/taler-util"; import { h, VNode } from "preact"; -import { MerchantBackend } from "../../../../declaration.js"; -import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { CardTable } from "./Table.js"; export interface Props { - devices: MerchantBackend.BankAccounts.BankAccountEntry[]; - onLoadMoreBefore?: () => void; - onLoadMoreAfter?: () => void; + devices: TalerMerchantApi.BankAccountSummaryEntry[]; + // onLoadMoreBefore?: () => void; + // onLoadMoreAfter?: () => void; onCreate: () => void; - onDelete: (e: MerchantBackend.BankAccounts.BankAccountEntry) => void; - onSelect: (e: MerchantBackend.BankAccounts.BankAccountEntry) => void; + onDelete: (e: TalerMerchantApi.BankAccountSummaryEntry) => void; + onSelect: (e: TalerMerchantApi.BankAccountSummaryEntry) => void; } export function ListPage({ @@ -38,12 +37,10 @@ export function ListPage({ onCreate, onDelete, onSelect, - onLoadMoreBefore, - onLoadMoreAfter, + // onLoadMoreBefore, + // onLoadMoreAfter, }: Props): VNode { - const form = { payto_uri: "" }; - const { i18n } = useTranslationContext(); return ( <section class="section is-main-section"> <CardTable @@ -54,10 +51,10 @@ export function ListPage({ onCreate={onCreate} onDelete={onDelete} onSelect={onSelect} - onLoadMoreBefore={onLoadMoreBefore} - hasMoreBefore={!onLoadMoreBefore} - onLoadMoreAfter={onLoadMoreAfter} - hasMoreAfter={!onLoadMoreAfter} + // onLoadMoreBefore={onLoadMoreBefore} + // hasMoreBefore={!onLoadMoreBefore} + // onLoadMoreAfter={onLoadMoreAfter} + // hasMoreAfter={!onLoadMoreAfter} /> </section> ); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/Table.tsx index 7d6db0782..efe484402 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/Table.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/Table.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,23 +19,18 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { parsePaytoUri, PaytoType, PaytoUri, PaytoUriBitcoin, PaytoUriIBAN, PaytoUriTalerBank, PaytoUriUnknown, TalerMerchantApi } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { Fragment, h, VNode } from "preact"; import { StateUpdater, useState } from "preact/hooks"; -import { MerchantBackend } from "../../../../declaration.js"; -import { parsePaytoUri, PaytoType, PaytoUri, PaytoUriBitcoin, PaytoUriIBAN, PaytoUriTalerBank, PaytoUriUnknown } from "@gnu-taler/taler-util"; -type Entity = MerchantBackend.BankAccounts.BankAccountEntry; +type Entity = TalerMerchantApi.BankAccountSummaryEntry; interface Props { accounts: Entity[]; onDelete: (e: Entity) => void; onSelect: (e: Entity) => void; onCreate: () => void; - onLoadMoreBefore?: () => void; - hasMoreBefore?: boolean; - hasMoreAfter?: boolean; - onLoadMoreAfter?: () => void; } export function CardTable({ @@ -43,10 +38,6 @@ export function CardTable({ onCreate, onDelete, onSelect, - onLoadMoreAfter, - onLoadMoreBefore, - hasMoreAfter, - hasMoreBefore, }: Props): VNode { const [rowSelection, rowSelectionHandler] = useState<string[]>([]); @@ -84,10 +75,6 @@ export function CardTable({ onSelect={onSelect} rowSelection={rowSelection} rowSelectionHandler={rowSelectionHandler} - onLoadMoreAfter={onLoadMoreAfter} - onLoadMoreBefore={onLoadMoreBefore} - hasMoreAfter={hasMoreAfter} - hasMoreBefore={hasMoreBefore} /> ) : ( <EmptyTable /> @@ -104,25 +91,12 @@ interface TableProps { onDelete: (e: Entity) => void; onSelect: (e: Entity) => void; rowSelectionHandler: StateUpdater<string[]>; - onLoadMoreBefore?: () => void; - hasMoreBefore?: boolean; - hasMoreAfter?: boolean; - onLoadMoreAfter?: () => void; -} - -function toggleSelected<T>(id: T): (prev: T[]) => T[] { - return (prev: T[]): T[] => - prev.indexOf(id) == -1 ? [...prev, id] : prev.filter((e) => e != id); } function Table({ accounts, - onLoadMoreAfter, onDelete, onSelect, - onLoadMoreBefore, - hasMoreAfter, - hasMoreBefore, }: TableProps): VNode { const { i18n } = useTranslationContext(); const emptyList: Record<PaytoType | "unknown", { parsed: PaytoUri, acc: Entity }[]> = { "bitcoin": [], "x-taler-bank": [], "iban": [], "unknown": [], } @@ -372,7 +346,7 @@ function EmptyTable(): VNode { <div class="content has-text-grey has-text-centered"> <p> <span class="icon is-large"> - <i class="mdi mdi-emoticon-sad mdi-48px" /> + <i class="mdi mdi-magnify mdi-48px" /> </span> </p> <p> diff --git a/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/index.tsx index 100241e22..1eda7382d 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/accounts/list/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,74 +19,77 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { HttpStatusCode } from "@gnu-taler/taler-util"; +import { HttpStatusCode, TalerError, TalerMerchantApi, assertUnreachable } from "@gnu-taler/taler-util"; import { - ErrorType, - HttpError, - useTranslationContext, + useTranslationContext } from "@gnu-taler/web-util/browser"; import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; +import { ErrorLoadingMerchant } from "../../../../components/ErrorLoadingMerchant.js"; import { Loading } from "../../../../components/exception/loading.js"; import { NotificationCard } from "../../../../components/menu/index.js"; -import { MerchantBackend } from "../../../../declaration.js"; -import { useInstanceOtpDevices, useOtpDeviceAPI } from "../../../../hooks/otp.js"; +import { useSessionContext } from "../../../../context/session.js"; +import { useInstanceBankAccounts } from "../../../../hooks/bank.js"; import { Notification } from "../../../../utils/types.js"; +import { LoginPage } from "../../../login/index.js"; +import { NotFoundPageOrAdminCreate } from "../../../notfound/index.js"; import { ListPage } from "./ListPage.js"; -import { useBankAccountAPI, useInstanceBankAccounts } from "../../../../hooks/bank.js"; interface Props { - onUnauthorized: () => VNode; - onLoadError: (error: HttpError<MerchantBackend.ErrorDetail>) => VNode; - onNotFound: () => VNode; onCreate: () => void; onSelect: (id: string) => void; } export default function ListOtpDevices({ - onUnauthorized, - onLoadError, onCreate, onSelect, - onNotFound, }: Props): VNode { - const [position, setPosition] = useState<string | undefined>(undefined); const { i18n } = useTranslationContext(); const [notif, setNotif] = useState<Notification | undefined>(undefined); - const { deleteBankAccount } = useBankAccountAPI(); - const result = useInstanceBankAccounts({ position }, (id) => setPosition(id)); + const { lib: api } = useSessionContext(); + const { state } = useSessionContext(); + const result = useInstanceBankAccounts(); - if (result.loading) return <Loading />; - if (!result.ok) { - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.NotFound - ) - return onNotFound(); - return onLoadError(result); + if (!result) return <Loading /> + if (result instanceof TalerError) { + return <ErrorLoadingMerchant error={result} /> + } + if (result.type === "fail") { + switch(result.case) { + case HttpStatusCode.NotFound: { + return <NotFoundPageOrAdminCreate /> + } + case HttpStatusCode.Unauthorized: { + return <LoginPage /> + } + default: { + assertUnreachable(result) + } + } } return ( <Fragment> <NotificationCard notification={notif} /> - + {result.body.accounts.length < 1 && + <NotificationCard notification={{ + type: "WARN", + message: i18n.str`You need to associate a bank account to receive revenue.`, + description: i18n.str`Without this the merchant backend will refuse to create new orders.` + }} /> + } <ListPage - devices={result.data.accounts} - onLoadMoreBefore={ - result.isReachingStart ? result.loadMorePrev : undefined - } - onLoadMoreAfter={result.isReachingEnd ? result.loadMore : undefined} + devices={result.body.accounts} + // onLoadMoreBefore={ + // result.isFirstPage ? undefined: result.loadFirst + // } + // onLoadMoreAfter={result.isLastPage ? undefined : result.loadNext} onCreate={onCreate} onSelect={(e) => { onSelect(e.h_wire); }} - onDelete={(e: MerchantBackend.BankAccounts.BankAccountEntry) => - deleteBankAccount(e.h_wire) + onDelete={(e: TalerMerchantApi.BankAccountSummaryEntry) => { + return api.instance.deleteBankAccount(state.token, e.h_wire) .then(() => setNotif({ message: i18n.str`bank account delete successfully`, @@ -101,6 +104,7 @@ export default function ListOtpDevices({ }), ) } + } /> </Fragment> ); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/accounts/update/Update.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/accounts/update/Update.stories.tsx index d6b1d65e0..06ea9d07a 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/accounts/update/Update.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/accounts/update/Update.stories.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 diff --git a/packages/merchant-backoffice-ui/src/paths/instance/accounts/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/accounts/update/UpdatePage.tsx index e0e0ba7ed..1a8e9bdc1 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/accounts/update/UpdatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/accounts/update/UpdatePage.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,6 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { TalerMerchantApi } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; @@ -28,41 +29,69 @@ import { FormProvider, } from "../../../../components/form/FormProvider.js"; import { Input } from "../../../../components/form/Input.js"; -import { MerchantBackend, WithId } from "../../../../declaration.js"; -import { InputSelector } from "../../../../components/form/InputSelector.js"; import { InputPaytoForm } from "../../../../components/form/InputPaytoForm.js"; +import { InputSelector } from "../../../../components/form/InputSelector.js"; import { undefinedIfEmpty } from "../../../../utils/table.js"; -type Entity = MerchantBackend.BankAccounts.BankAccountEntry - & WithId; +type Entity = TalerMerchantApi.BankAccountEntry & WithId; const accountAuthType = ["unedit", "none", "basic"]; interface Props { - onUpdate: (d: MerchantBackend.BankAccounts.AccountPatchDetails) => Promise<void>; + onUpdate: (d: TalerMerchantApi.AccountPatchDetails) => Promise<void>; onBack?: () => void; account: Entity; } - export function UpdatePage({ account, onUpdate, onBack }: Props): VNode { const { i18n } = useTranslationContext(); - const [state, setState] = useState<Partial<MerchantBackend.BankAccounts.AccountPatchDetails>>(account); - - const errors: FormErrors<MerchantBackend.BankAccounts.AccountPatchDetails> = { - credit_facade_url: !state.credit_facade_url ? i18n.str`required` : !isValidURL(state.credit_facade_url) ? i18n.str`invalid url` : undefined, - credit_facade_credentials: undefinedIfEmpty({ + const [state, setState] = + useState<Partial<TalerMerchantApi.AccountPatchDetails>>(account); - username: state.credit_facade_credentials?.type !== "basic" ? undefined - : !state.credit_facade_credentials.username ? i18n.str`required` : undefined, + // @ts-expect-error "unedit" is fine since is part of the accountAuthType values + if (state.credit_facade_credentials?.type === "unedit") { + // we use this to set creds to undefined but server don't get this type + state.credit_facade_credentials = undefined; + } - password: state.credit_facade_credentials?.type !== "basic" ? undefined - : !state.credit_facade_credentials.password ? i18n.str`required` : undefined, + const facadeURL = safeConvertURL(state.credit_facade_url); + + const errors: FormErrors<TalerMerchantApi.AccountPatchDetails> = { + credit_facade_url: !state.credit_facade_url + ? undefined + : !facadeURL + ? i18n.str`Invalid url` + : !facadeURL.href.endsWith("/") + ? i18n.str`URL should end with a '/'` + : facadeURL.searchParams.size > 0 + ? i18n.str`URL should not contain params` + : facadeURL.hash + ? i18n.str`URL should not hash param` + : undefined, + credit_facade_credentials: undefinedIfEmpty({ + username: + state.credit_facade_credentials?.type !== "basic" + ? undefined + : !state.credit_facade_credentials.username + ? i18n.str`required` + : undefined, - repeatPassword: state.credit_facade_credentials?.type !== "basic" ? undefined - : !(state.credit_facade_credentials as any).repeatPassword ? i18n.str`required` : - (state.credit_facade_credentials as any).repeatPassword !== state.credit_facade_credentials.password ? i18n.str`doesnt match` + password: + state.credit_facade_credentials?.type !== "basic" + ? undefined + : !state.credit_facade_credentials.password + ? i18n.str`required` : undefined, + + repeatPassword: + state.credit_facade_credentials?.type !== "basic" + ? undefined + : !(state.credit_facade_credentials as any).repeatPassword + ? i18n.str`required` + : (state.credit_facade_credentials as any).repeatPassword !== + state.credit_facade_credentials.password + ? i18n.str`doesn't match` + : undefined, }), }; @@ -72,20 +101,27 @@ export function UpdatePage({ account, onUpdate, onBack }: Props): VNode { const submitForm = () => { if (hasErrors) return Promise.reject(); - - const creds: typeof state.credit_facade_credentials = - state.credit_facade_credentials?.type === "basic" ? { - type: "basic", - password: state.credit_facade_credentials.password, - username: state.credit_facade_credentials.username, - } : state.credit_facade_credentials?.type === "none" ? { - type: "none" - } : undefined; - - return onUpdate({ - credit_facade_credentials: creds, - credit_facade_url: state.credit_facade_url, - }); + const credit_facade_url = !state.credit_facade_url + ? undefined + : facadeURL?.href; + + const credit_facade_credentials: + | TalerMerchantApi.FacadeCredentials + | undefined = + credit_facade_url == undefined || + state.credit_facade_credentials === undefined + ? undefined + : state.credit_facade_credentials.type === "basic" + ? { + type: "basic", + password: state.credit_facade_credentials.password, + username: state.credit_facade_credentials.username, + } + : { + type: "none", + }; + + return onUpdate({ credit_facade_credentials, credit_facade_url }); }; return ( @@ -134,7 +170,7 @@ export function UpdatePage({ account, onUpdate, onBack }: Props): VNode { toStr={(str) => { if (str === "none") return "Without authentication"; if (str === "basic") return "With authentication"; - return "Do not change" + return "Do not change"; }} /> {state.credit_facade_credentials?.type === "basic" ? ( @@ -185,11 +221,12 @@ export function UpdatePage({ account, onUpdate, onBack }: Props): VNode { ); } -function isValidURL(s: string): boolean { +//TODO: move to utils +export function safeConvertURL(s?: string): URL | undefined { + if (!s) return undefined; try { - const u = new URL(s) - return true; + return new URL(s); } catch (e) { - return false; + return undefined; } } diff --git a/packages/merchant-backoffice-ui/src/paths/instance/accounts/update/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/accounts/update/index.tsx index 44dee7651..70942fd55 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/accounts/update/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/accounts/update/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,68 +19,125 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { HttpStatusCode } from "@gnu-taler/taler-util"; +import { HttpStatusCode, TalerError, TalerMerchantApi, assertUnreachable } from "@gnu-taler/taler-util"; import { - ErrorType, - HttpError, - useTranslationContext, + useTranslationContext } from "@gnu-taler/web-util/browser"; import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; +import { ErrorLoadingMerchant } from "../../../../components/ErrorLoadingMerchant.js"; import { Loading } from "../../../../components/exception/loading.js"; import { NotificationCard } from "../../../../components/menu/index.js"; -import { MerchantBackend, WithId } from "../../../../declaration.js"; -import { useBankAccountAPI, useBankAccountDetails } from "../../../../hooks/bank.js"; +import { useSessionContext } from "../../../../context/session.js"; +import { useBankAccountDetails } from "../../../../hooks/bank.js"; import { Notification } from "../../../../utils/types.js"; +import { LoginPage } from "../../../login/index.js"; +import { NotFoundPageOrAdminCreate } from "../../../notfound/index.js"; +import { TestRevenueErrorType, testRevenueAPI } from "../create/index.js"; import { UpdatePage } from "./UpdatePage.js"; -export type Entity = MerchantBackend.BankAccounts.AccountPatchDetails & WithId; +export type Entity = TalerMerchantApi.AccountPatchDetails & WithId; interface Props { onBack?: () => void; onConfirm: () => void; - onUnauthorized: () => VNode; - onNotFound: () => VNode; - onLoadError: (e: HttpError<MerchantBackend.ErrorDetail>) => VNode; bid: string; } export default function UpdateValidator({ bid, onConfirm, onBack, - onUnauthorized, - onNotFound, - onLoadError, }: Props): VNode { - const { updateBankAccount } = useBankAccountAPI(); + const { lib: api } = useSessionContext(); + const { state } = useSessionContext(); const result = useBankAccountDetails(bid); const [notif, setNotif] = useState<Notification | undefined>(undefined); const { i18n } = useTranslationContext(); - if (result.loading) return <Loading />; - if (!result.ok) { - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.NotFound - ) - return onNotFound(); - return onLoadError(result); + if (!result) return <Loading />; + if (result instanceof TalerError) { + return <ErrorLoadingMerchant error={result} />; + } + if (result.type === "fail") { + switch (result.case) { + case HttpStatusCode.NotFound: { + return <NotFoundPageOrAdminCreate />; + } + case HttpStatusCode.Unauthorized: { + return <LoginPage /> + } + default: { + assertUnreachable(result); + } + } } return ( <Fragment> <NotificationCard notification={notif} /> <UpdatePage - account={{ ...result.data, id: bid }} + account={{ ...result.body, id: bid }} onBack={onBack} - onUpdate={(data) => { - return updateBankAccount(bid, data) + onUpdate={async (request) => { + const revenueAPI = !request.credit_facade_url + ? undefined + : new URL("./", request.credit_facade_url); + + if (revenueAPI) { + const resp = await testRevenueAPI( + revenueAPI, + request.credit_facade_credentials, + ); + if (resp.type === "fail") { + switch (resp.case) { + case TestRevenueErrorType.NO_CONFIG: { + setNotif({ + message: i18n.str`Could not create account`, + type: "ERROR", + description: i18n.str`The endpoint doesn't seems to be a Taler Revenue API`, + }); + return; + } + case TestRevenueErrorType.CLIENT_BAD_REQUEST: { + setNotif({ + message: i18n.str`Could not create account`, + type: "ERROR", + description: i18n.str`Server replied with "bad request".`, + }); + return; + } + case TestRevenueErrorType.UNAUTHORIZED: { + setNotif({ + message: i18n.str`Could not create account`, + type: "ERROR", + description: i18n.str`Unauthorized, try with another credentials.`, + }); + return; + } + case TestRevenueErrorType.NOT_FOUND: { + setNotif({ + message: i18n.str`Could not create account`, + type: "ERROR", + description: i18n.str`Check facade URL, server replied with "not found".`, + }); + return; + } + case TestRevenueErrorType.GENERIC_ERROR: { + setNotif({ + message: i18n.str`Could not create account`, + type: "ERROR", + description: resp.detail.hint, + }); + return; + } + default: { + assertUnreachable(resp.case) + } + } + } + } + return api.instance.updateBankAccount(state.token, bid, request) .then(onConfirm) .catch((error) => { setNotif({ diff --git a/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx index 21dadb1e3..3168c7cc4 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/details/DetailPage.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 @@ -24,17 +24,17 @@ import { h, VNode } from "preact"; import { useState } from "preact/hooks"; import { FormProvider } from "../../../components/form/FormProvider.js"; import { Input } from "../../../components/form/Input.js"; -import { MerchantBackend } from "../../../declaration.js"; +import { TalerMerchantApi } from "@gnu-taler/taler-util"; -type Entity = MerchantBackend.Instances.InstanceReconfigurationMessage; +type Entity = TalerMerchantApi.InstanceReconfigurationMessage; interface Props { onUpdate: () => void; onDelete: () => void; - selected: MerchantBackend.Instances.QueryInstancesResponse; + selected: TalerMerchantApi.QueryInstancesResponse; } function convert( - from: MerchantBackend.Instances.QueryInstancesResponse, + from: TalerMerchantApi.QueryInstancesResponse, ): Entity { const defaults = { default_wire_fee_amortization: 1, diff --git a/packages/merchant-backoffice-ui/src/paths/instance/details/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/details/index.tsx index 9b393b818..e1a7f87f0 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/details/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/details/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 @@ -13,67 +13,70 @@ 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/> */ -import { ErrorType, HttpError } from "@gnu-taler/web-util/browser"; -import { Fragment, h, VNode } from "preact"; +import { HttpStatusCode, TalerError, assertUnreachable } from "@gnu-taler/taler-util"; +import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; +import { ErrorLoadingMerchant } from "../../../components/ErrorLoadingMerchant.js"; import { Loading } from "../../../components/exception/loading.js"; import { DeleteModal } from "../../../components/modal/index.js"; -import { useInstanceContext } from "../../../context/instance.js"; -import { MerchantBackend } from "../../../declaration.js"; -import { useInstanceAPI, useInstanceDetails } from "../../../hooks/instance.js"; +import { useSessionContext } from "../../../context/session.js"; +import { useInstanceDetails } from "../../../hooks/instance.js"; +import { LoginPage } from "../../login/index.js"; +import { NotFoundPageOrAdminCreate } from "../../notfound/index.js"; import { DetailPage } from "./DetailPage.js"; -import { HttpStatusCode } from "@gnu-taler/taler-util"; interface Props { - onUnauthorized: () => VNode; - onLoadError: (error: HttpError<MerchantBackend.ErrorDetail>) => VNode; onUpdate: () => void; - onNotFound: () => VNode; onDelete: () => void; } export default function Detail({ onUpdate, - onLoadError, - onUnauthorized, onDelete, - onNotFound, }: Props): VNode { - const { id } = useInstanceContext(); + const { state } = useSessionContext(); const result = useInstanceDetails(); const [deleting, setDeleting] = useState<boolean>(false); - const { deleteInstance } = useInstanceAPI(); + // const { deleteInstance } = useInstanceAPI(); + const { lib } = useSessionContext(); - if (result.loading) return <Loading />; - if (!result.ok) { - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.NotFound - ) - return onNotFound(); - return onLoadError(result); + 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 ( <Fragment> <DetailPage - selected={result.data} + selected={result.body} onUpdate={onUpdate} onDelete={() => setDeleting(true)} /> {deleting && ( <DeleteModal - element={{ name: result.data.name, id }} + element={{ name: result.body.name, id: state.instance }} onCancel={() => setDeleting(false)} onConfirm={async (): Promise<void> => { + if (state.status !== "loggedIn") { + return + } try { - await deleteInstance(); + await lib.instance.deleteCurrentInstance(state.token); onDelete(); } catch (error) { //FIXME: show message error diff --git a/packages/merchant-backoffice-ui/src/paths/instance/details/stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/details/stories.tsx index 367fabce2..42cb1cb02 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/details/stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/details/stories.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,8 +19,8 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode, FunctionalComponent } from "preact"; -import { ConfigContextProvider } from "../../../context/config.js"; +import { MerchantApiProviderTesting } from "@gnu-taler/web-util/browser"; +import { FunctionalComponent, h } from "preact"; import { DetailPage as TestedComponent } from "./DetailPage.js"; export default { @@ -37,14 +37,33 @@ function createExample<Props>( props: Partial<Props>, ) { const component = (args: any) => ( - <ConfigContextProvider + <MerchantApiProviderTesting value={{ - currency: "TESTKUDOS", - version: "1", + cancelRequest: () => { }, + changeBackend: () => { }, + config: { + currency: "ARS", + version: "1", + currencies: { + "ASD": { + name: "testkudos", + alt_unit_names: {}, + num_fractional_input_digits: 1, + num_fractional_normal_digits: 1, + num_fractional_trailing_zero_digits: 1, + } + }, + exchanges: [], + name: "taler-merchant" + }, + hints: [], + lib: {} as any, + onActivity: (() => { }) as any, + url: new URL("asdasd"), }} > <Internal {...(props as any)} /> - </ConfigContextProvider> + </MerchantApiProviderTesting> ); return { component, props }; } diff --git a/packages/merchant-backoffice-ui/src/paths/instance/index.stories.ts b/packages/merchant-backoffice-ui/src/paths/instance/index.stories.ts index 1d8c76ff9..8f06937df 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/index.stories.ts +++ b/packages/merchant-backoffice-ui/src/paths/instance/index.stories.ts @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 @@ -16,4 +16,3 @@ export * as details from "./details/stories.js"; export * as kycList from "./kyc/list/ListPage.stories.js"; -export * as reserve from "./reserves/create/CreatedSuccessfully.stories.js"; 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 index d33f64ada..046636b4b 100644 --- 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 @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,10 +19,9 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode, FunctionalComponent } from "preact"; -import { ListPage as TestedComponent } from "./ListPage.js"; +import { PaytoString } from "@gnu-taler/taler-util"; import * as tests from "@gnu-taler/web-util/testing"; -import { MerchantBackend } from "../../../../declaration.js"; +import { ListPage as TestedComponent } from "./ListPage.js"; export default { title: "Pages/KYC/List", @@ -40,19 +39,19 @@ export const Example = tests.createExample(TestedComponent, { { aml_status: 0, exchange_url: "http://exchange.taler", - payto_uri: "payto://iban/de123123123", + 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", + payto_uri: "payto://iban/de123123123" as PaytoString, }, { aml_status: 2, exchange_url: "http://exchange.taler", - payto_uri: "payto://iban/de123123123", + payto_uri: "payto://iban/de123123123" as PaytoString, }, ], - } as MerchantBackend.KYC.AccountKycRedirects, + }, }); 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 338081886..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-2023 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,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 { MerchantBackend } from "../../../../declaration.js"; export interface Props { - status: MerchantBackend.KYC.AccountKycRedirects; + status: TalerMerchantApi.AccountKycRedirects; } export function ListPage({ status }: Props): VNode { @@ -85,11 +85,11 @@ export function ListPage({ status }: Props): VNode { ); } interface PendingTableProps { - entries: MerchantBackend.KYC.MerchantAccountKycRedirect[]; + entries: TalerMerchantApi.MerchantAccountKycRedirect[]; } interface TimedOutTableProps { - entries: MerchantBackend.KYC.ExchangeKycTimeout[]; + entries: TalerMerchantApi.ExchangeKycTimeout[]; } function PendingTable({ entries }: PendingTableProps): VNode { 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 5b93ac169..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-2023 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,42 +19,55 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { ErrorType, HttpError } from "@gnu-taler/web-util/browser"; -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 { MerchantBackend } from "../../../../declaration.js"; import { useInstanceKYCDetails } from "../../../../hooks/instance.js"; import { ListPage } from "./ListPage.js"; -import { HttpStatusCode } from "@gnu-taler/taler-util"; interface Props { - onUnauthorized: () => VNode; - onLoadError: (error: HttpError<MerchantBackend.ErrorDetail>) => VNode; - onNotFound: () => VNode; } -export default function ListKYC({ - onUnauthorized, - onLoadError, - onNotFound, -}: Props): VNode { +export default function ListKYC(_p: Props): VNode { const result = useInstanceKYCDetails(); - if (result.loading) return <Loading />; - if (!result.ok) { - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.NotFound - ) - return onNotFound(); - 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; - const status = result.data.type === "ok" ? undefined : result.data.status; + if (!status) { + return <div>no kyc required</div>; + } + return <ListPage status={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>; diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/Create.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/Create.stories.tsx index bd9f65718..fc814b68f 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/Create.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/Create.stories.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx index 52ee9d351..7be3d23f6 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,58 +19,62 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { Amounts } from "@gnu-taler/taler-util"; -import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { add, isAfter, isBefore, isFuture } from "date-fns"; -import { Fragment, h, VNode } from "preact"; +import { + AbsoluteTime, + AmountString, + Amounts, + Duration, + TalerMerchantApi, + TalerProtocolDuration, +} from "@gnu-taler/taler-util"; +import { + useTranslationContext +} from "@gnu-taler/web-util/browser"; +import { format, isFuture } from "date-fns"; +import { Fragment, VNode, h } from "preact"; import { useEffect, useState } from "preact/hooks"; import { FormErrors, FormProvider, } from "../../../../components/form/FormProvider.js"; import { Input } from "../../../../components/form/Input.js"; -import { InputBoolean } from "../../../../components/form/InputBoolean.js"; import { InputCurrency } from "../../../../components/form/InputCurrency.js"; import { InputDate } from "../../../../components/form/InputDate.js"; +import { InputDuration } from "../../../../components/form/InputDuration.js"; import { InputGroup } from "../../../../components/form/InputGroup.js"; import { InputLocation } from "../../../../components/form/InputLocation.js"; import { InputNumber } from "../../../../components/form/InputNumber.js"; +import { InputToggle } from "../../../../components/form/InputToggle.js"; import { InventoryProductForm } from "../../../../components/product/InventoryProductForm.js"; import { NonInventoryProductFrom } from "../../../../components/product/NonInventoryProductForm.js"; import { ProductList } from "../../../../components/product/ProductList.js"; -import { useConfigContext } from "../../../../context/config.js"; -import { Duration, MerchantBackend, WithId } from "../../../../declaration.js"; -import { OrderCreateSchema as schema } from "../../../../schemas/index.js"; +import { useSessionContext } from "../../../../context/session.js"; +import { usePreference } from "../../../../hooks/preference.js"; import { rate } from "../../../../utils/amount.js"; import { undefinedIfEmpty } from "../../../../utils/table.js"; -import { useSettings } from "../../../../hooks/useSettings.js"; -import { InputToggle } from "../../../../components/form/InputToggle.js"; interface Props { - onCreate: (d: MerchantBackend.Orders.PostOrderRequest) => void; + onCreate: (d: TalerMerchantApi.PostOrderRequest) => void; onBack?: () => void; instanceConfig: InstanceConfig; - instanceInventory: (MerchantBackend.Products.ProductDetail & WithId)[]; + instanceInventory: (TalerMerchantApi.ProductDetail & WithId)[]; } interface InstanceConfig { use_stefan: boolean; - default_pay_delay: Duration; - default_wire_transfer_delay: Duration; + default_pay_delay: TalerProtocolDuration; + default_wire_transfer_delay: TalerProtocolDuration; } -function with_defaults(config: InstanceConfig, currency: string): Partial<Entity> { - const defaultPayDeadline = - !config.default_pay_delay || config.default_pay_delay.d_us === "forever" - ? undefined - : add(new Date(), { - seconds: config.default_pay_delay.d_us / (1000 * 1000), - }); - const defaultWireDeadline = - !config.default_wire_transfer_delay || config.default_wire_transfer_delay.d_us === "forever" - ? undefined - : add(new Date(), { - seconds: config.default_wire_transfer_delay.d_us / (1000 * 1000), - }); +function with_defaults( + config: InstanceConfig, + _currency: string, +): Partial<Entity> { + const defaultPayDeadline = Duration.fromTalerProtocolDuration( + config.default_pay_delay, + ); + const defaultWireDeadline = Duration.fromTalerProtocolDuration( + config.default_wire_transfer_delay, + ); return { inventoryProducts: {}, @@ -78,9 +82,9 @@ function with_defaults(config: InstanceConfig, currency: string): Partial<Entity pricing: {}, payments: { max_fee: undefined, + createToken: true, pay_deadline: defaultPayDeadline, refund_deadline: defaultPayDeadline, - createToken: true, wire_transfer_deadline: defaultWireDeadline, }, shipping: {}, @@ -89,7 +93,7 @@ function with_defaults(config: InstanceConfig, currency: string): Partial<Entity } interface ProductAndQuantity { - product: MerchantBackend.Products.ProductDetail & WithId; + product: TalerMerchantApi.ProductDetail & WithId; quantity: number; } export interface ProductMap { @@ -103,47 +107,38 @@ interface Pricing { } interface Shipping { delivery_date?: Date; - delivery_location?: MerchantBackend.Location; + delivery_location?: TalerMerchantApi.Location; fullfilment_url?: string; } interface Payments { - refund_deadline?: Date; - pay_deadline?: Date; - wire_transfer_deadline?: Date; - auto_refund_deadline?: Date; + refund_deadline: Duration; + pay_deadline: Duration; + wire_transfer_deadline: Duration; + auto_refund_deadline: Duration; max_fee?: string; createToken: boolean; minimum_age?: number; } interface Entity { inventoryProducts: ProductMap; - products: MerchantBackend.Product[]; + products: TalerMerchantApi.Product[]; pricing: Partial<Pricing>; payments: Partial<Payments>; shipping: Partial<Shipping>; extra: Record<string, string>; } -const stringIsValidJSON = (value: string) => { - try { - JSON.parse(value.trim()); - return true; - } catch { - return false; - } -}; - export function CreatePage({ onCreate, onBack, instanceConfig, instanceInventory, }: Props): VNode { - const config = useConfigContext(); - const instance_default = with_defaults(instanceConfig, config.currency) + const { config } = useSessionContext(); + const instance_default = with_defaults(instanceConfig, config.currency); const [value, valueHandler] = useState(instance_default); const zero = Amounts.zeroOfCurrency(config.currency); - const [settings, updateSettings] = useSettings() + const [settings, updateSettings] = usePreference(); const inventoryList = Object.values(value.inventoryProducts || {}); const productList = Object.values(value.products || {}); @@ -164,54 +159,44 @@ export function CreatePage({ ? i18n.str`must be greater than 0` : undefined, }), - // extra: - // value.extra && !stringIsValidJSON(value.extra) - // ? i18n.str`not a valid json` - // : undefined, payments: undefinedIfEmpty({ refund_deadline: !value.payments?.refund_deadline ? undefined - : !isFuture(value.payments.refund_deadline) - ? i18n.str`should be in the future` - : value.payments.pay_deadline && - isBefore(value.payments.refund_deadline, value.payments.pay_deadline) - ? i18n.str`refund deadline cannot be before pay deadline` - : value.payments.wire_transfer_deadline && - isBefore( + : value.payments.pay_deadline && + Duration.cmp( + value.payments.refund_deadline, + value.payments.pay_deadline, + ) === -1 + ? i18n.str`refund deadline cannot be before pay deadline` + : value.payments.wire_transfer_deadline && + Duration.cmp( value.payments.wire_transfer_deadline, value.payments.refund_deadline, - ) - ? i18n.str`wire transfer deadline cannot be before refund deadline` - : undefined, + ) === -1 + ? i18n.str`wire transfer deadline cannot be before refund deadline` + : undefined, pay_deadline: !value.payments?.pay_deadline ? i18n.str`required` - : !isFuture(value.payments.pay_deadline) - ? i18n.str`should be in the future` - : value.payments.wire_transfer_deadline && - isBefore( + : value.payments.wire_transfer_deadline && + Duration.cmp( value.payments.wire_transfer_deadline, value.payments.pay_deadline, - ) - ? i18n.str`wire transfer deadline cannot be before pay deadline` - : undefined, + ) === -1 + ? i18n.str`wire transfer deadline cannot be before pay deadline` + : undefined, wire_transfer_deadline: !value.payments?.wire_transfer_deadline ? i18n.str`required` - : !isFuture(value.payments.wire_transfer_deadline) - ? i18n.str`should be in the future` - : undefined, + : undefined, auto_refund_deadline: !value.payments?.auto_refund_deadline ? undefined - : !isFuture(value.payments.auto_refund_deadline) - ? i18n.str`should be in the future` - : !value.payments?.refund_deadline - ? i18n.str`should have a refund deadline` - : !isAfter( - value.payments.refund_deadline, - value.payments.auto_refund_deadline, - ) - ? i18n.str`auto refund cannot be after refund deadline` - : undefined, - + : !value.payments?.refund_deadline + ? i18n.str`should have a refund deadline` + : Duration.cmp( + value.payments.refund_deadline, + value.payments.auto_refund_deadline, + ) == -1 + ? i18n.str`auto refund cannot be after refund deadline` + : undefined, }), shipping: undefinedIfEmpty({ delivery_date: !value.shipping?.delivery_date @@ -226,42 +211,40 @@ export function CreatePage({ ); const submit = (): void => { - const order = schema.cast(value); + const order = value as any; //schema.cast(value); if (!value.payments) return; if (!value.shipping) return; - const request: MerchantBackend.Orders.PostOrderRequest = { + const request: TalerMerchantApi.PostOrderRequest = { order: { amount: order.pricing.order_price, summary: order.pricing.summary, products: productList, - extra: JSON.stringify(value.extra), - pay_deadline: value.payments.pay_deadline - ? { - t_s: Math.floor(value.payments.pay_deadline.getTime() / 1000), - } - : undefined, - wire_transfer_deadline: value.payments.wire_transfer_deadline - ? { - t_s: Math.floor( - value.payments.wire_transfer_deadline.getTime() / 1000, - ), - } - : undefined, - refund_deadline: value.payments.refund_deadline - ? { - t_s: Math.floor(value.payments.refund_deadline.getTime() / 1000), - } - : undefined, + extra: undefinedIfEmpty(value.extra), + pay_deadline: AbsoluteTime.toProtocolTimestamp( + AbsoluteTime.addDuration( + AbsoluteTime.now(), + value.payments.pay_deadline!, + ), + ), + wire_transfer_deadline: AbsoluteTime.toProtocolTimestamp( + AbsoluteTime.addDuration( + AbsoluteTime.now(), + value.payments.wire_transfer_deadline!, + ), + ), + refund_deadline: AbsoluteTime.toProtocolTimestamp( + AbsoluteTime.addDuration( + AbsoluteTime.now(), + value.payments.refund_deadline!, + ), + ), auto_refund: value.payments.auto_refund_deadline - ? { - d_us: Math.floor( - value.payments.auto_refund_deadline.getTime() * 1000, - ), - } + ? Duration.toTalerProtocolDuration( + value.payments.auto_refund_deadline, + ) : undefined, - max_fee: value.payments.max_fee as string, - + max_fee: value.payments.max_fee as AmountString, delivery_date: value.shipping.delivery_date ? { t_s: value.shipping.delivery_date.getTime() / 1000 } : undefined, @@ -280,7 +263,7 @@ export function CreatePage({ }; const addProductToTheInventoryList = ( - product: MerchantBackend.Products.ProductDetail & WithId, + product: TalerMerchantApi.ProductDetail & WithId, quantity: number, ) => { valueHandler((v) => { @@ -298,7 +281,7 @@ export function CreatePage({ }); }; - const addNewProduct = async (product: MerchantBackend.Product) => { + const addNewProduct = async (product: TalerMerchantApi.Product) => { return valueHandler((v) => { const products = v.products ? [...v.products, product] : []; return { ...v, products }; @@ -314,7 +297,7 @@ export function CreatePage({ }; const [editingProduct, setEditingProduct] = useState< - MerchantBackend.Product | undefined + TalerMerchantApi.Product | undefined >(undefined); const totalPriceInventory = inventoryList.reduce((prev, cur) => { @@ -325,7 +308,7 @@ export function CreatePage({ const totalPriceProducts = productList.reduce((prev, cur) => { if (!cur.price) return zero; const p = Amounts.parseOrThrow(cur.price); - return Amounts.add(prev, Amounts.mult(p, cur.quantity).amount).amount; + return Amounts.add(prev, Amounts.mult(p, cur.quantity ?? 0).amount).amount; }, zero); const hasProducts = inventoryList.length > 0 || productList.length > 0; @@ -334,7 +317,7 @@ export function CreatePage({ const totalAsString = Amounts.stringify(totalPrice.amount); const allProducts = productList.concat(inventoryList.map(asProduct)); - const [newField, setNewField] = useState("") + const [newField, setNewField] = useState(""); useEffect(() => { valueHandler((v) => { @@ -354,40 +337,50 @@ export function CreatePage({ totalPrice.amount, ); - const minAgeByProducts = allProducts.reduce( + const minAgeByProducts = inventoryList.reduce( (cur, prev) => - !prev.minimum_age || cur > prev.minimum_age ? cur : prev.minimum_age, + !prev.product.minimum_age || cur > prev.product.minimum_age ? cur : prev.product.minimum_age, 0, ); - const noDefault_payDeadline = !instance_default.payments || !instance_default.payments.pay_deadline - const noDefault_wireDeadline = !instance_default.payments || !instance_default.payments.wire_transfer_deadline - const requiresSomeTalerOptions = noDefault_payDeadline || noDefault_wireDeadline + // if there is no default pay deadline + const noDefault_payDeadline = + !instance_default.payments || !instance_default.payments.pay_deadline; + // and there is no default wire deadline + const noDefault_wireDeadline = + !instance_default.payments || + !instance_default.payments.wire_transfer_deadline; + // user required to set the taler options + const requiresSomeTalerOptions = + noDefault_payDeadline || noDefault_wireDeadline; return ( <div> - <section class="section is-main-section"> <div class="tabs is-toggle is-fullwidth is-small"> <ul> - <li class={!settings.advanceOrderMode ? "is-active" : ""} onClick={() => { - updateSettings({ - ...settings, - advanceOrderMode: false - }) - }}> - <a > - <span><i18n.Translate>Simple</i18n.Translate></span> + <li + class={!settings.advanceOrderMode ? "is-active" : ""} + onClick={() => { + updateSettings("advanceOrderMode", false); + }} + > + <a> + <span> + <i18n.Translate>Simple</i18n.Translate> + </span> </a> </li> - <li class={settings.advanceOrderMode ? "is-active" : ""} onClick={() => { - updateSettings({ - ...settings, - advanceOrderMode: true - }) - }}> - <a > - <span><i18n.Translate>Advanced</i18n.Translate></span> + <li + class={settings.advanceOrderMode ? "is-active" : ""} + onClick={() => { + updateSettings("advanceOrderMode", true); + }} + > + <a> + <span> + <i18n.Translate>Advanced</i18n.Translate> + </span> </a> </li> </ul> @@ -415,7 +408,7 @@ export function CreatePage({ inventory={instanceInventory} /> - {settings.advanceOrderMode && + {settings.advanceOrderMode && ( <NonInventoryProductFrom productToEdit={editingProduct} onAddProduct={(p) => { @@ -423,7 +416,7 @@ export function CreatePage({ return addNewProduct(p); }} /> - } + )} {allProducts.length > 0 && ( <ProductList @@ -466,8 +459,8 @@ export function CreatePage({ discountOrRise > 0 && (discountOrRise < 1 ? `discount of %${Math.round( - (1 - discountOrRise) * 100, - )}` + (1 - discountOrRise) * 100, + )}` : `rise of %${Math.round((discountOrRise - 1) * 100)}`) } tooltip={i18n.str`Amount to be paid by the customer`} @@ -488,7 +481,7 @@ export function CreatePage({ tooltip={i18n.str`Title of the order to be shown to the customer`} /> - {settings.advanceOrderMode && + {settings.advanceOrderMode && ( <InputGroup name="shipping" label={i18n.str`Shipping and Fulfillment`} @@ -514,135 +507,200 @@ export function CreatePage({ tooltip={i18n.str`URL to which the user will be redirected after successful payment.`} /> </InputGroup> - } + )} - {(settings.advanceOrderMode || requiresSomeTalerOptions) && + {(settings.advanceOrderMode || requiresSomeTalerOptions) && ( <InputGroup name="payments" label={i18n.str`Taler payment options`} tooltip={i18n.str`Override default Taler payment settings for this order`} > - {(settings.advanceOrderMode || noDefault_payDeadline) && <InputDate - name="payments.pay_deadline" - label={i18n.str`Payment deadline`} - tooltip={i18n.str`Deadline for the customer to pay for the offer before it expires. Inventory products will be reserved until this deadline.`} - side={ - <span> - <button class="button" onClick={() => { - const c = { - ...value, - payments: { - ...(value.payments ?? {}), - pay_deadline: instance_default.payments?.pay_deadline - } - } - valueHandler(c) - }}> - <i18n.Translate>default</i18n.Translate> - </button> - </span> - } - />} - {settings.advanceOrderMode && <InputDate - name="payments.refund_deadline" - label={i18n.str`Refund deadline`} - tooltip={i18n.str`Time until which the order can be refunded by the merchant.`} - side={ - <span> - <button class="button" onClick={() => { - valueHandler({ - ...value, - payments: { - ...(value.payments ?? {}), - refund_deadline: instance_default.payments?.refund_deadline - } - }) - }}> - <i18n.Translate>default</i18n.Translate> - </button> - </span> - } - />} - {(settings.advanceOrderMode || noDefault_wireDeadline) && <InputDate - name="payments.wire_transfer_deadline" - label={i18n.str`Wire transfer deadline`} - tooltip={i18n.str`Deadline for the exchange to make the wire transfer.`} - side={ - <span> - <button class="button" onClick={() => { - valueHandler({ - ...value, - payments: { - ...(value.payments ?? {}), - wire_transfer_deadline: instance_default.payments?.wire_transfer_deadline - } - }) - }}> - <i18n.Translate>default</i18n.Translate> - </button> - </span> - } - />} - {settings.advanceOrderMode && <InputDate - name="payments.auto_refund_deadline" - label={i18n.str`Auto-refund deadline`} - tooltip={i18n.str`Time until which the wallet will automatically check for refunds without user interaction.`} - />} - - {settings.advanceOrderMode && <InputCurrency - name="payments.max_fee" - label={i18n.str`Maximum fee`} - tooltip={i18n.str`Maximum fees the merchant is willing to cover for this order. Higher deposit fees must be covered in full by the consumer.`} - />} - {settings.advanceOrderMode && <InputToggle - name="payments.createToken" - label={i18n.str`Create token`} - tooltip={i18n.str`If the order ID is easy to guess the token will prevent user to steal orders from others.`} - />} - {settings.advanceOrderMode && <InputNumber - name="payments.minimum_age" - label={i18n.str`Minimum age required`} - tooltip={i18n.str`Any value greater than 0 will limit the coins able be used to pay this contract. If empty the age restriction will be defined by the products`} - help={ - minAgeByProducts > 0 - ? i18n.str`Min age defined by the producs is ${minAgeByProducts}` - : i18n.str`No product with age restriction in this order` - } - />} + {(settings.advanceOrderMode || noDefault_payDeadline) && ( + <InputDuration + name="payments.pay_deadline" + label={i18n.str`Payment time`} + help={ + <DeadlineHelp duration={value.payments?.pay_deadline} /> + } + withForever + withoutClear + tooltip={i18n.str`Time for the customer to pay for the offer before it expires. Inventory products will be reserved until this deadline. Time start to run after the order is created.`} + side={ + <span> + <button + class="button" + onClick={() => { + const c = { + ...value, + payments: { + ...(value.payments ?? {}), + pay_deadline: + instance_default.payments?.pay_deadline, + }, + }; + valueHandler(c); + }} + > + <i18n.Translate>default</i18n.Translate> + </button> + </span> + } + /> + )} + {settings.advanceOrderMode && ( + <InputDuration + name="payments.refund_deadline" + label={i18n.str`Refund time`} + help={ + <DeadlineHelp + duration={value.payments?.refund_deadline} + /> + } + withForever + withoutClear + tooltip={i18n.str`Time while the order can be refunded by the merchant. Time starts after the order is created.`} + side={ + <span> + <button + class="button" + onClick={() => { + valueHandler({ + ...value, + payments: { + ...(value.payments ?? {}), + refund_deadline: + instance_default.payments?.refund_deadline, + }, + }); + }} + > + <i18n.Translate>default</i18n.Translate> + </button> + </span> + } + /> + )} + {(settings.advanceOrderMode || noDefault_wireDeadline) && ( + <InputDuration + name="payments.wire_transfer_deadline" + label={i18n.str`Wire transfer time`} + help={ + <DeadlineHelp + duration={value.payments?.wire_transfer_deadline} + /> + } + withoutClear + withForever + tooltip={i18n.str`Time for the exchange to make the wire transfer. Time starts after the order is created.`} + side={ + <span> + <button + class="button" + onClick={() => { + valueHandler({ + ...value, + payments: { + ...(value.payments ?? {}), + wire_transfer_deadline: + instance_default.payments + ?.wire_transfer_deadline, + }, + }); + }} + > + <i18n.Translate>default</i18n.Translate> + </button> + </span> + } + /> + )} + {settings.advanceOrderMode && ( + <InputDuration + name="payments.auto_refund_deadline" + label={i18n.str`Auto-refund time`} + help={ + <DeadlineHelp + duration={value.payments?.auto_refund_deadline} + /> + } + tooltip={i18n.str`Time until which the wallet will automatically check for refunds without user interaction.`} + withForever + /> + )} + + {settings.advanceOrderMode && ( + <InputCurrency + name="payments.max_fee" + label={i18n.str`Maximum fee`} + tooltip={i18n.str`Maximum fees the merchant is willing to cover for this order. Higher deposit fees must be covered in full by the consumer.`} + /> + )} + {settings.advanceOrderMode && ( + <InputToggle + name="payments.createToken" + label={i18n.str`Create token`} + tooltip={i18n.str`If the order ID is easy to guess the token will prevent user to steal orders from others.`} + /> + )} + {settings.advanceOrderMode && ( + <InputNumber + name="payments.minimum_age" + label={i18n.str`Minimum age required`} + tooltip={i18n.str`Any value greater than 0 will limit the coins able be used to pay this contract. If empty the age restriction will be defined by the products`} + help={ + minAgeByProducts > 0 + ? i18n.str`Min age defined by the producs is ${minAgeByProducts}` + : i18n.str`No product with age restriction in this order` + } + /> + )} </InputGroup> - } + )} - {settings.advanceOrderMode && + {settings.advanceOrderMode && ( <InputGroup name="extra" label={i18n.str`Additional information`} tooltip={i18n.str`Custom information to be included in the contract for this order.`} > - {Object.keys(value.extra ?? {}).map((key) => { - - return <Input - name={`extra.${key}`} - inputType="multiline" - label={key} - tooltip={i18n.str`You must enter a value in JavaScript Object Notation (JSON).`} - side={ - <button class="button" onClick={(e) => { - if (value.extra && value.extra[key] !== undefined) { - console.log(value.extra) - delete value.extra[key] - } - valueHandler({ - ...value, - }) - }}>remove</button> - } - /> + {Object.keys(value.extra ?? {}).map((key, idx) => { + return ( + <Input + name={`extra.${key}`} + key={String(idx)} + inputType="multiline" + label={key} + tooltip={i18n.str`You must enter a value in JavaScript Object Notation (JSON).`} + side={ + <button + class="button" + onClick={(e) => { + if ( + value.extra && + value.extra[key] !== undefined + ) { + delete value.extra[key]; + } + valueHandler({ + ...value, + }); + e.preventDefault(); + }} + > + remove + </button> + } + /> + ); })} <div class="field is-horizontal"> <div class="field-label is-normal"> <label class="label"> <i18n.Translate>Custom field name</i18n.Translate> - <span class="icon has-tooltip-right" data-tooltip={"new extra field"}> + <span + class="icon has-tooltip-right" + data-tooltip={"new extra field"} + > <i class="mdi mdi-information" /> </span> </label> @@ -650,23 +708,33 @@ export function CreatePage({ <div class="field-body is-flex-grow-3"> <div class="field"> <p class="control"> - <input class="input " value={newField} onChange={(e) => setNewField(e.currentTarget.value)} /> + <input + class="input " + value={newField} + onChange={(e) => setNewField(e.currentTarget.value)} + /> </p> </div> </div> - <button class="button" onClick={(e) => { - setNewField("") - valueHandler({ - ...value, - extra: { - ...(value.extra ?? {}), - [newField]: "" - } - }) - }}>add</button> + <button + class="button" + onClick={(e) => { + setNewField(""); + valueHandler({ + ...value, + extra: { + ...(value.extra ?? {}), + [newField]: "", + }, + }); + e.preventDefault(); + }} + > + add + </button> </div> </InputGroup> - } + )} </FormProvider> <div class="buttons is-right mt-5"> @@ -691,7 +759,7 @@ export function CreatePage({ ); } -function asProduct(p: ProductAndQuantity): MerchantBackend.Product { +function asProduct(p: ProductAndQuantity): TalerMerchantApi.Product { return { product_id: p.product.id, image: p.product.image, @@ -700,6 +768,27 @@ function asProduct(p: ProductAndQuantity): MerchantBackend.Product { quantity: p.quantity, description: p.product.description, taxes: p.product.taxes, - minimum_age: p.product.minimum_age, }; } + +function DeadlineHelp({ duration }: { duration?: Duration }): VNode { + const { i18n } = useTranslationContext(); + const [now, setNow] = useState(AbsoluteTime.now()); + useEffect(() => { + const iid = setInterval(() => { + setNow(AbsoluteTime.now()); + }, 60 * 1000); + return () => { + clearInterval(iid); + }; + }); + if (!duration) return <i18n.Translate>Disabled</i18n.Translate>; + const when = AbsoluteTime.addDuration(now, duration); + if (when.t_ms === "never") + return <i18n.Translate>No deadline</i18n.Translate>; + return ( + <i18n.Translate> + Deadline at {format(when.t_ms, "dd/MM/yy HH:mm")} + </i18n.Translate> + ); +} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx index 88a984c97..32f3f05c7 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/OrderCreatedSuccessfully.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 @@ -13,12 +13,15 @@ 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/> */ -import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { h, VNode } from "preact"; -import { useEffect, useState } from "preact/hooks"; +import { HttpStatusCode, TalerError, assertUnreachable } from "@gnu-taler/taler-util"; +import { Loading, useTranslationContext } from "@gnu-taler/web-util/browser"; +import { VNode, h } from "preact"; +import { ErrorLoadingMerchant } from "../../../../components/ErrorLoadingMerchant.js"; import { CreatedSuccessfully } from "../../../../components/notifications/CreatedSuccessfully.js"; -import { useOrderAPI } from "../../../../hooks/order.js"; +import { useOrderDetails } from "../../../../hooks/order.js"; +import { NotFoundPageOrAdminCreate } from "../../../notfound/index.js"; import { Entity } from "./index.js"; +import { LoginPage } from "../../../login/index.js"; interface Props { entity: Entity; @@ -31,14 +34,38 @@ export function OrderCreatedSuccessfully({ onConfirm, onCreateAnother, }: Props): VNode { - const { getPaymentURL } = useOrderAPI(); - const [url, setURL] = useState<string | undefined>(undefined); + const result = useOrderDetails(entity.response.order_id) const { i18n } = useTranslationContext(); - useEffect(() => { - getPaymentURL(entity.response.order_id).then((response) => { - setURL(response.data); - }); - }, [getPaymentURL, entity.response.order_id]); + + if (!result) return <Loading /> + if (result instanceof TalerError) { + return <ErrorLoadingMerchant error={result} /> + } + if (result.type === "fail") { + switch(result.case) { + case HttpStatusCode.NotFound: { + return <NotFoundPageOrAdminCreate /> + } + case HttpStatusCode.BadGateway: { + return <div>Failed to obtain a response from the exchange</div>; + } + case HttpStatusCode.GatewayTimeout: { + return ( + <div>The merchant's interaction with the exchange took too long</div> + ); + } + case HttpStatusCode.Unauthorized: { + return <LoginPage /> + } + default: { + assertUnreachable(result) + } + } + } + + const url = result.body.order_status === "unpaid" ? + result.body.taler_pay_uri : + result.body.contract_terms.fulfillment_url return ( <CreatedSuccessfully diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/index.tsx index 2474fd042..861114014 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,72 +19,71 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { ErrorType, HttpError } from "@gnu-taler/web-util/browser"; -import { Fragment, h, VNode } from "preact"; +import { HttpStatusCode, TalerError, TalerMerchantApi, assertUnreachable } from "@gnu-taler/taler-util"; +import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; +import { ErrorLoadingMerchant } from "../../../../components/ErrorLoadingMerchant.js"; import { Loading } from "../../../../components/exception/loading.js"; import { NotificationCard } from "../../../../components/menu/index.js"; -import { MerchantBackend } from "../../../../declaration.js"; +import { useSessionContext } from "../../../../context/session.js"; import { useInstanceDetails } from "../../../../hooks/instance.js"; -import { useOrderAPI } from "../../../../hooks/order.js"; import { useInstanceProducts } from "../../../../hooks/product.js"; import { Notification } from "../../../../utils/types.js"; +import { LoginPage } from "../../../login/index.js"; +import { NotFoundPageOrAdminCreate } from "../../../notfound/index.js"; import { CreatePage } from "./CreatePage.js"; -import { HttpStatusCode } from "@gnu-taler/taler-util"; export type Entity = { - request: MerchantBackend.Orders.PostOrderRequest; - response: MerchantBackend.Orders.PostOrderResponse; + request: TalerMerchantApi.PostOrderRequest; + response: TalerMerchantApi.PostOrderResponse; }; interface Props { onBack?: () => void; onConfirm: (id: string) => void; - onUnauthorized: () => VNode; - onNotFound: () => VNode; - onLoadError: (error: HttpError<MerchantBackend.ErrorDetail>) => VNode; } export default function OrderCreate({ onConfirm, onBack, - onLoadError, - onNotFound, - onUnauthorized, }: Props): VNode { - const { createOrder } = useOrderAPI(); + const { lib } = useSessionContext(); const [notif, setNotif] = useState<Notification | undefined>(undefined); - + const { state } = useSessionContext(); const detailsResult = useInstanceDetails(); const inventoryResult = useInstanceProducts(); - if (detailsResult.loading) return <Loading />; - if (inventoryResult.loading) return <Loading />; - - if (!detailsResult.ok) { - if ( - detailsResult.type === ErrorType.CLIENT && - detailsResult.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - detailsResult.type === ErrorType.CLIENT && - detailsResult.status === HttpStatusCode.NotFound - ) - return onNotFound(); - return onLoadError(detailsResult); + if (!detailsResult) return <Loading /> + if (detailsResult instanceof TalerError) { + return <ErrorLoadingMerchant error={detailsResult} /> } - - if (!inventoryResult.ok) { - if ( - inventoryResult.type === ErrorType.CLIENT && - inventoryResult.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - inventoryResult.type === ErrorType.CLIENT && - inventoryResult.status === HttpStatusCode.NotFound - ) - return onNotFound(); - return onLoadError(inventoryResult); + if (detailsResult.type === "fail") { + switch (detailsResult.case) { + case HttpStatusCode.Unauthorized: { + return <LoginPage /> + } + case HttpStatusCode.NotFound: { + return <NotFoundPageOrAdminCreate />; + } + default: { + assertUnreachable(detailsResult); + } + } + } + if (!inventoryResult) return <Loading /> + if (inventoryResult instanceof TalerError) { + return <ErrorLoadingMerchant error={inventoryResult} /> + } + if (inventoryResult.type === "fail") { + switch (inventoryResult.case) { + case HttpStatusCode.NotFound: { + return <NotFoundPageOrAdminCreate />; + } + case HttpStatusCode.Unauthorized: { + return <LoginPage /> + } + default: { + assertUnreachable(inventoryResult); + } + } } return ( @@ -93,10 +92,17 @@ export default function OrderCreate({ <CreatePage onBack={onBack} - onCreate={(request: MerchantBackend.Orders.PostOrderRequest) => { - createOrder(request) + onCreate={(request: TalerMerchantApi.PostOrderRequest) => { + lib.instance.createOrder(state.token, request) .then((r) => { - return onConfirm(r.data.order_id) + if (r.type === "ok") { + return onConfirm(r.body.order_id) + } else { + setNotif({ + message: "could not create order", + type: "ERROR", + }); + } }) .catch((error) => { setNotif({ @@ -106,8 +112,8 @@ export default function OrderCreate({ }); }); }} - instanceConfig={detailsResult.data} - instanceInventory={inventoryResult.data} + instanceConfig={detailsResult.body} + instanceInventory={inventoryResult.body} /> </Fragment> ); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Detail.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Detail.stories.tsx index 6e73a01a5..7d4877db9 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Detail.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Detail.stories.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,9 +19,9 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { AmountString, TalerMerchantApi } from "@gnu-taler/taler-util"; import { addDays } from "date-fns"; -import { h, VNode, FunctionalComponent } from "preact"; -import { MerchantBackend } from "../../../../declaration.js"; +import { FunctionalComponent, h } from "preact"; import { DetailPage as TestedComponent } from "./DetailPage.js"; export default { @@ -42,14 +42,13 @@ function createExample<Props>( return r; } -const defaultContractTerm = { - amount: "TESTKUDOS:10", +const defaultContractTerm: TalerMerchantApi.ContractTerms = { + amount: "TESTKUDOS:10" as AmountString, timestamp: { t_s: new Date().getTime() / 1000, }, - auditors: [], exchanges: [], - max_fee: "TESTKUDOS:1", + max_fee: "TESTKUDOS:1" as AmountString, merchant: {} as any, merchant_base_url: "http://merchant.url/", order_id: "2021.165-03GDFC26Y1NNG", @@ -66,7 +65,7 @@ const defaultContractTerm = { }, wire_method: "x-taler-bank", h_wire: "asd", -} as MerchantBackend.ContractTerms; +}; // contract_terms: defaultContracTerm, export const Claimed = createExample(TestedComponent, { @@ -83,16 +82,16 @@ export const PaidNotRefundable = createExample(TestedComponent, { order_status: "paid", contract_terms: defaultContractTerm, refunded: false, - deposit_total: "TESTKUDOS:10", - exchange_ec: 0, + deposit_total: "TESTKUDOS:10" as AmountString, + exchange_code: 0, order_status_url: "http://merchant.backend/status", - exchange_hc: 0, - refund_amount: "TESTKUDOS:0", + exchange_http_status: 0, + refund_amount: "TESTKUDOS:0" as AmountString, refund_details: [], refund_pending: false, wire_details: [], - wire_reports: [], wired: false, + wire_reports: [], }, }); @@ -107,15 +106,15 @@ export const PaidRefundable = createExample(TestedComponent, { }, }, refunded: false, - deposit_total: "TESTKUDOS:10", - exchange_ec: 0, + deposit_total: "TESTKUDOS:10" as AmountString, + exchange_code: 0, order_status_url: "http://merchant.backend/status", - exchange_hc: 0, - refund_amount: "TESTKUDOS:0", + exchange_http_status: 0, + refund_amount: "TESTKUDOS:0" as AmountString, refund_details: [], + wire_reports: [], refund_pending: false, wire_details: [], - wire_reports: [], wired: false, }, }); @@ -130,6 +129,6 @@ export const Unpaid = createExample(TestedComponent, { }, summary: "text summary", taler_pay_uri: "pay uri", - total_amount: "TESTKUDOS:10", + total_amount: "TESTKUDOS:10" as AmountString, }, }); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx index 5ff76e37a..498ea83e3 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,8 +19,15 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { AmountJson, Amounts, stringifyRefundUri } from "@gnu-taler/taler-util"; -import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { + AmountJson, + Amounts, + TalerMerchantApi, + stringifyRefundUri, +} from "@gnu-taler/taler-util"; +import { + useTranslationContext +} from "@gnu-taler/web-util/browser"; import { format, formatDistance } from "date-fns"; import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; @@ -33,28 +40,30 @@ import { InputGroup } from "../../../../components/form/InputGroup.js"; import { InputLocation } from "../../../../components/form/InputLocation.js"; import { TextField } from "../../../../components/form/TextField.js"; import { ProductList } from "../../../../components/product/ProductList.js"; -import { useBackendContext } from "../../../../context/backend.js"; -import { MerchantBackend } from "../../../../declaration.js"; -import { datetimeFormatForSettings, useSettings } from "../../../../hooks/useSettings.js"; +import { useSessionContext } from "../../../../context/session.js"; +import { + datetimeFormatForSettings, + usePreference, +} from "../../../../hooks/preference.js"; import { mergeRefunds } from "../../../../utils/amount.js"; import { RefundModal } from "../list/Table.js"; import { Event, Timeline } from "./Timeline.js"; -type Entity = MerchantBackend.Orders.MerchantOrderStatusResponse; -type CT = MerchantBackend.ContractTerms; +type Entity = TalerMerchantApi.MerchantOrderStatusResponse; +type CT = TalerMerchantApi.ContractTerms; interface Props { onBack: () => void; selected: Entity; id: string; - onRefund: (id: string, value: MerchantBackend.Orders.RefundRequest) => void; + onRefund: (id: string, value: TalerMerchantApi.RefundRequest) => void; } -type Paid = MerchantBackend.Orders.CheckPaymentPaidResponse & { +type Paid = TalerMerchantApi.CheckPaymentPaidResponse & { refund_taken: string; }; -type Unpaid = MerchantBackend.Orders.CheckPaymentUnpaidResponse; -type Claimed = MerchantBackend.Orders.CheckPaymentClaimedResponse; +type Unpaid = TalerMerchantApi.CheckPaymentUnpaidResponse; +type Claimed = TalerMerchantApi.CheckPaymentClaimedResponse; function ContractTerms({ value }: { value: CT }) { const { i18n } = useTranslationContext(); @@ -149,8 +158,12 @@ function ClaimedPage({ order, }: { id: string; - order: MerchantBackend.Orders.CheckPaymentClaimedResponse; + order: TalerMerchantApi.CheckPaymentClaimedResponse; }) { + const now = new Date(); + const refundable = + order.contract_terms.refund_deadline.t_s !== "never" && + now.getTime() < order.contract_terms.refund_deadline.t_s * 1000; const events: Event[] = []; if (order.contract_terms.timestamp.t_s !== "never") { events.push({ @@ -166,20 +179,20 @@ function ClaimedPage({ type: "deadline", }); } - if (order.contract_terms.refund_deadline.t_s !== "never") { + if (order.contract_terms.refund_deadline.t_s !== "never" && refundable) { events.push({ when: new Date(order.contract_terms.refund_deadline.t_s * 1000), description: "refund deadline", type: "deadline", }); } - if (order.contract_terms.wire_transfer_deadline.t_s !== "never") { - events.push({ - when: new Date(order.contract_terms.wire_transfer_deadline.t_s * 1000), - description: "wire deadline", - type: "deadline", - }); - } + // if (order.contract_terms.wire_transfer_deadline.t_s !== "never") { + // events.push({ + // when: new Date(order.contract_terms.wire_transfer_deadline.t_s * 1000), + // description: "wire deadline", + // type: "deadline", + // }); + // } if ( order.contract_terms.delivery_date && order.contract_terms.delivery_date.t_s !== "never" @@ -193,7 +206,7 @@ function ClaimedPage({ const [value, valueHandler] = useState<Partial<Claimed>>(order); const { i18n } = useTranslationContext(); - const [settings] = useSettings() + const [settings] = usePreference(); return ( <div> @@ -237,10 +250,14 @@ function ClaimedPage({ <b> <i18n.Translate>claimed at</i18n.Translate>: </b>{" "} - {format( - new Date(order.contract_terms.timestamp.t_s * 1000), - datetimeFormatForSettings(settings) - )} + {order.contract_terms.timestamp.t_s === "never" + ? "never" + : format( + new Date( + order.contract_terms.timestamp.t_s * 1000, + ), + datetimeFormatForSettings(settings), + )} </p> </div> </div> @@ -311,25 +328,16 @@ function PaidPage({ onRefund, }: { id: string; - order: MerchantBackend.Orders.CheckPaymentPaidResponse; + order: TalerMerchantApi.CheckPaymentPaidResponse; onRefund: (id: string) => void; }) { + const now = new Date(); + const refundable = + order.contract_terms.refund_deadline.t_s !== "never" && + now.getTime() < order.contract_terms.refund_deadline.t_s * 1000; + const events: Event[] = []; - if (order.contract_terms.timestamp.t_s !== "never") { - events.push({ - when: new Date(order.contract_terms.timestamp.t_s * 1000), - description: "order created", - type: "start", - }); - } - if (order.contract_terms.pay_deadline.t_s !== "never") { - events.push({ - when: new Date(order.contract_terms.pay_deadline.t_s * 1000), - description: "pay deadline", - type: "deadline", - }); - } - if (order.contract_terms.refund_deadline.t_s !== "never") { + if (order.contract_terms.refund_deadline.t_s !== "never" && refundable) { events.push({ when: new Date(order.contract_terms.refund_deadline.t_s * 1000), description: "refund deadline", @@ -363,66 +371,71 @@ function PaidPage({ }); } }); - if (order.wire_details && order.wire_details.length) { - if (order.wire_details.length > 1) { - let last: MerchantBackend.Orders.TransactionWireTransfer | null = null; - let first: MerchantBackend.Orders.TransactionWireTransfer | null = null; - let total: AmountJson | null = null; - - order.wire_details.forEach((w) => { - if (last === null || last.execution_time.t_s < w.execution_time.t_s) { - last = w; - } - if (first === null || first.execution_time.t_s > w.execution_time.t_s) { - first = w; - } - total = - total === null - ? Amounts.parseOrThrow(w.amount) - : Amounts.add(total, Amounts.parseOrThrow(w.amount)).amount; - }); - const last_time = last!.execution_time.t_s; - if (last_time !== "never") { - events.push({ - when: new Date(last_time * 1000), - description: `wired ${Amounts.stringify(total!)}`, - type: "wired-range", + const ra = !order.refunded ? undefined : Amounts.parse(order.refund_amount); + const am = Amounts.parseOrThrow(order.contract_terms.amount); + if (ra && Amounts.cmp(ra, am) === 1) { + if (order.wire_details && order.wire_details.length) { + if (order.wire_details.length > 1) { + let last: TalerMerchantApi.TransactionWireTransfer | null = null; + let first: TalerMerchantApi.TransactionWireTransfer | null = null; + let total: AmountJson | null = null; + + order.wire_details.forEach((w) => { + if (last === null || last.execution_time.t_s < w.execution_time.t_s) { + last = w; + } + if ( + first === null || + first.execution_time.t_s > w.execution_time.t_s + ) { + first = w; + } + total = + total === null + ? Amounts.parseOrThrow(w.amount) + : Amounts.add(total, Amounts.parseOrThrow(w.amount)).amount; }); - } - const first_time = first!.execution_time.t_s; - if (first_time !== "never") { - events.push({ - when: new Date(first_time * 1000), - description: `wire transfer started...`, - type: "wired-range", - }); - } - } else { - order.wire_details.forEach((e) => { - if (e.execution_time.t_s !== "never") { + const last_time = last!.execution_time.t_s; + if (last_time !== "never") { events.push({ - when: new Date(e.execution_time.t_s * 1000), - description: `wired ${e.amount}`, - type: "wired", + when: new Date(last_time * 1000), + description: `wired ${Amounts.stringify(total!)}`, + type: "wired-range", }); } - }); + const first_time = first!.execution_time.t_s; + if (first_time !== "never") { + events.push({ + when: new Date(first_time * 1000), + description: `wire transfer started...`, + type: "wired-range", + }); + } + } else { + order.wire_details.forEach((e) => { + if (e.execution_time.t_s !== "never") { + events.push({ + when: new Date(e.execution_time.t_s * 1000), + description: `wired ${e.amount}`, + type: "wired", + }); + } + }); + } } } - const now = new Date() const nextEvent = events.find((e) => { - return e.when.getTime() > now.getTime() - }) + return e.when.getTime() > now.getTime(); + }); const [value, valueHandler] = useState<Partial<Paid>>(order); - const { url: backendURL } = useBackendContext() + const { state } = useSessionContext(); + const refundurl = stringifyRefundUri({ - merchantBaseUrl: backendURL, - orderId: order.contract_terms.order_id - }) - const refundable = - new Date().getTime() < order.contract_terms.refund_deadline.t_s * 1000; + merchantBaseUrl: state.backendUrl.href, + orderId: order.contract_terms.order_id, + }); const { i18n } = useTranslationContext(); const amount = Amounts.parseOrThrow(order.contract_terms.amount); @@ -503,15 +516,16 @@ function PaidPage({ textOverflow: "ellipsis", }} > - {nextEvent && + {nextEvent && ( <p> - <i18n.Translate>Next event in </i18n.Translate> {formatDistance( + <i18n.Translate>Next event in </i18n.Translate>{" "} + {formatDistance( nextEvent.when, new Date(), // "yyyy/MM/dd HH:mm:ss", )} </p> - } + )} </div> </div> </div> @@ -607,11 +621,11 @@ function UnpaidPage({ order, }: { id: string; - order: MerchantBackend.Orders.CheckPaymentUnpaidResponse; + order: TalerMerchantApi.CheckPaymentUnpaidResponse; }) { const [value, valueHandler] = useState<Partial<Unpaid>>(order); const { i18n } = useTranslationContext(); - const [settings] = useSettings() + const [settings] = usePreference(); return ( <div> <section class="hero is-hero-bar"> @@ -659,9 +673,9 @@ function UnpaidPage({ {order.creation_time.t_s === "never" ? "never" : format( - new Date(order.creation_time.t_s * 1000), - datetimeFormatForSettings(settings) - )} + new Date(order.creation_time.t_s * 1000), + datetimeFormatForSettings(settings), + )} </p> </div> </div> @@ -764,7 +778,3 @@ export function DetailPage({ id, selected, onRefund, onBack }: Props): VNode { </Fragment> ); } - -async function copyToClipboard(text: string) { - return navigator.clipboard.writeText(text); -} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Timeline.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Timeline.tsx index 8c863f386..2d62e2252 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Timeline.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/Timeline.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 @@ -16,7 +16,7 @@ import { format } from "date-fns"; import { h } from "preact"; import { useEffect, useState } from "preact/hooks"; -import { datetimeFormatForSettings, useSettings } from "../../../../hooks/useSettings.js"; +import { datetimeFormatForSettings, usePreference } from "../../../../hooks/preference.js"; interface Props { events: Event[]; @@ -31,7 +31,7 @@ export function Timeline({ events: e }: Props) { }); events.sort((a, b) => a.when.getTime() - b.when.getTime()); - const [settings] = useSettings(); + const [settings] = usePreference(); const [state, setState] = useState(events); useEffect(() => { const handle = setTimeout(() => { diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx index 1517a3c42..b28e59b29 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 @@ -14,55 +14,62 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ import { - useTranslationContext, - HttpError, - ErrorType, + HttpStatusCode, + TalerError, + assertUnreachable, +} from "@gnu-taler/taler-util"; +import { + useTranslationContext } from "@gnu-taler/web-util/browser"; -import { Fragment, h, VNode } from "preact"; +import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; +import { ErrorLoadingMerchant } from "../../../../components/ErrorLoadingMerchant.js"; import { Loading } from "../../../../components/exception/loading.js"; import { NotificationCard } from "../../../../components/menu/index.js"; -import { MerchantBackend } from "../../../../declaration.js"; -import { useOrderAPI, useOrderDetails } from "../../../../hooks/order.js"; +import { useSessionContext } from "../../../../context/session.js"; +import { useOrderDetails } from "../../../../hooks/order.js"; import { Notification } from "../../../../utils/types.js"; +import { LoginPage } from "../../../login/index.js"; +import { NotFoundPageOrAdminCreate } from "../../../notfound/index.js"; import { DetailPage } from "./DetailPage.js"; -import { HttpStatusCode } from "@gnu-taler/taler-util"; export interface Props { oid: string; - onBack: () => void; - onUnauthorized: () => VNode; - onNotFound: () => VNode; - onLoadError: (error: HttpError<MerchantBackend.ErrorDetail>) => VNode; } -export default function Update({ - oid, - onBack, - onLoadError, - onNotFound, - onUnauthorized, -}: Props): VNode { - const { refundOrder } = useOrderAPI(); +export default function Update({ oid, onBack }: Props): VNode { const result = useOrderDetails(oid); const [notif, setNotif] = useState<Notification | undefined>(undefined); + const { lib: api } = useSessionContext(); + const { state } = useSessionContext(); const { i18n } = useTranslationContext(); - if (result.loading) return <Loading />; - if (!result.ok) { - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.NotFound - ) - return onNotFound(); - return onLoadError(result); + if (!result) return <Loading />; + if (result instanceof TalerError) { + return <ErrorLoadingMerchant error={result} />; + } + if (result.type === "fail") { + switch (result.case) { + case HttpStatusCode.NotFound: { + return <NotFoundPageOrAdminCreate />; + } + case HttpStatusCode.BadGateway: { + return <div>Failed to obtain a response from the exchange</div>; + } + case HttpStatusCode.GatewayTimeout: { + return ( + <div>The merchant's interaction with the exchange took too long</div> + ); + } + case HttpStatusCode.Unauthorized: { + return <LoginPage /> + } + default: { + assertUnreachable(result); + } + } } return ( @@ -72,8 +79,12 @@ export default function Update({ <DetailPage onBack={onBack} id={oid} - onRefund={(id, value) => - refundOrder(id, value) + onRefund={(id, value) => { + if (state.status !== "loggedIn") { + return; + } + api.instance + .addRefund(state.token, id, value) .then(() => setNotif({ message: i18n.str`refund created successfully`, @@ -86,9 +97,9 @@ export default function Update({ type: "ERROR", description: error.message, }), - ) - } - selected={result.data} + ); + }} + selected={result.body} /> </Fragment> ); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/List.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/List.stories.tsx index 156c577f4..5c9969689 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/List.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/List.stories.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,8 +19,9 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode, FunctionalComponent } from "preact"; +import { FunctionalComponent, h } from "preact"; import { ListPage as TestedComponent } from "./ListPage.js"; +import { AmountString } from "@gnu-taler/taler-util"; export default { title: "Pages/Order/List", @@ -54,7 +55,7 @@ export const Example = createExample(TestedComponent, { orders: [ { id: "123", - amount: "TESTKUDOS:10", + amount: "TESTKUDOS:10" as AmountString, paid: false, refundable: true, row_id: 1, @@ -66,7 +67,7 @@ export const Example = createExample(TestedComponent, { }, { id: "234", - amount: "TESTKUDOS:12", + amount: "TESTKUDOS:12" as AmountString, paid: true, refundable: true, row_id: 2, @@ -79,7 +80,7 @@ export const Example = createExample(TestedComponent, { }, { id: "456", - amount: "TESTKUDOS:1", + amount: "TESTKUDOS:1" as AmountString, paid: false, refundable: false, row_id: 3, @@ -92,7 +93,7 @@ export const Example = createExample(TestedComponent, { }, { id: "234", - amount: "TESTKUDOS:12", + amount: "TESTKUDOS:12" as AmountString, paid: false, refundable: false, row_id: 4, diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx index 9f80719a1..408bc0c0a 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/ListPage.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,14 +19,14 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { AbsoluteTime, TalerMerchantApi } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { format } from "date-fns"; -import { h, VNode, Fragment } from "preact"; +import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; import { DatePicker } from "../../../../components/picker/DatePicker.js"; -import { MerchantBackend, WithId } from "../../../../declaration.js"; +import { dateFormatForSettings, usePreference } from "../../../../hooks/preference.js"; import { CardTable } from "./Table.js"; -import { dateFormatForSettings, useSettings } from "../../../../hooks/useSettings.js"; export interface ListPageProps { onShowAll: () => void; @@ -43,23 +43,19 @@ export interface ListPageProps { isNotWiredActive: string; isWiredActive: string; - jumpToDate?: Date; - onSelectDate: (date?: Date) => void; + jumpToDate?: AbsoluteTime; + onSelectDate: (date?: AbsoluteTime) => void; - orders: (MerchantBackend.Orders.OrderHistoryEntry & WithId)[]; + orders: (TalerMerchantApi.OrderHistoryEntry & WithId)[]; onLoadMoreBefore?: () => void; - hasMoreBefore?: boolean; - hasMoreAfter?: boolean; onLoadMoreAfter?: () => void; - onSelectOrder: (o: MerchantBackend.Orders.OrderHistoryEntry & WithId) => void; - onRefundOrder: (o: MerchantBackend.Orders.OrderHistoryEntry & WithId) => void; + onSelectOrder: (o: TalerMerchantApi.OrderHistoryEntry & WithId) => void; + onRefundOrder: (o: TalerMerchantApi.OrderHistoryEntry & WithId) => void; onCreate: () => void; } export function ListPage({ - hasMoreAfter, - hasMoreBefore, onLoadMoreAfter, onLoadMoreBefore, orders, @@ -85,7 +81,7 @@ export function ListPage({ const { i18n } = useTranslationContext(); const dateTooltip = i18n.str`select date to show nearby orders`; const [pickDate, setPickDate] = useState(false); - const [settings] = useSettings(); + const [settings] = usePreference(); return ( <Fragment> @@ -177,7 +173,7 @@ export function ListPage({ class="input" type="text" readonly - value={!jumpToDate ? "" : format(jumpToDate, dateFormatForSettings(settings))} + value={!jumpToDate || jumpToDate.t_ms === "never" ? "" : format(jumpToDate.t_ms, dateFormatForSettings(settings))} placeholder={i18n.str`date (${dateFormatForSettings(settings)})`} onClick={() => { setPickDate(true); @@ -207,7 +203,9 @@ export function ListPage({ <DatePicker opened={pickDate} closeFunction={() => setPickDate(false)} - dateReceiver={onSelectDate} + dateReceiver={(d) => { + onSelectDate(AbsoluteTime.fromMilliseconds(d.getTime())) + }} /> <CardTable @@ -216,8 +214,6 @@ export function ListPage({ onCopyURL={onCopyURL} onSelect={onSelectOrder} onRefund={onRefundOrder} - hasMoreAfter={hasMoreAfter} - hasMoreBefore={hasMoreBefore} onLoadMoreAfter={onLoadMoreAfter} onLoadMoreBefore={onLoadMoreBefore} /> diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx index b2806bb79..5ece34409 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,10 +19,12 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { Amounts } from "@gnu-taler/taler-util"; -import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { Amounts, 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 { VNode, h } from "preact"; import { StateUpdater, useState } from "preact/hooks"; import { FormErrors, @@ -33,12 +35,14 @@ import { InputCurrency } from "../../../../components/form/InputCurrency.js"; import { InputGroup } from "../../../../components/form/InputGroup.js"; import { InputSelector } from "../../../../components/form/InputSelector.js"; import { ConfirmModal } from "../../../../components/modal/index.js"; -import { useConfigContext } from "../../../../context/config.js"; -import { MerchantBackend, WithId } from "../../../../declaration.js"; +import { useSessionContext } from "../../../../context/session.js"; +import { + datetimeFormatForSettings, + usePreference, +} from "../../../../hooks/preference.js"; import { mergeRefunds } from "../../../../utils/amount.js"; -import { datetimeFormatForSettings, useSettings } from "../../../../hooks/useSettings.js"; -type Entity = MerchantBackend.Orders.OrderHistoryEntry & WithId; +type Entity = TalerMerchantApi.OrderHistoryEntry & WithId; interface Props { orders: Entity[]; onRefund: (value: Entity) => void; @@ -46,8 +50,6 @@ interface Props { onCreate: () => void; onSelect: (order: Entity) => void; onLoadMoreBefore?: () => void; - hasMoreBefore?: boolean; - hasMoreAfter?: boolean; onLoadMoreAfter?: () => void; } @@ -59,8 +61,6 @@ export function CardTable({ onSelect, onLoadMoreAfter, onLoadMoreBefore, - hasMoreAfter, - hasMoreBefore, }: Props): VNode { const [rowSelection, rowSelectionHandler] = useState<string[]>([]); @@ -101,8 +101,6 @@ export function CardTable({ rowSelectionHandler={rowSelectionHandler} onLoadMoreAfter={onLoadMoreAfter} onLoadMoreBefore={onLoadMoreBefore} - hasMoreAfter={hasMoreAfter} - hasMoreBefore={hasMoreBefore} /> ) : ( <EmptyTable /> @@ -121,8 +119,6 @@ interface TableProps { onSelect: (id: Entity) => void; rowSelectionHandler: StateUpdater<string[]>; onLoadMoreBefore?: () => void; - hasMoreBefore?: boolean; - hasMoreAfter?: boolean; onLoadMoreAfter?: () => void; } @@ -133,19 +129,14 @@ function Table({ onCopyURL, onLoadMoreAfter, onLoadMoreBefore, - hasMoreAfter, - hasMoreBefore, }: TableProps): VNode { const { i18n } = useTranslationContext(); - const [settings] = useSettings(); + const [settings] = usePreference(); return ( <div class="table-container"> - {hasMoreBefore && ( - <button - class="button is-fullwidth" - onClick={onLoadMoreBefore} - > - <i18n.Translate>load newer orders</i18n.Translate> + {onLoadMoreBefore && ( + <button class="button is-fullwidth" onClick={onLoadMoreBefore}> + <i18n.Translate>load first page</i18n.Translate> </button> )} <table class="table is-striped is-hoverable is-fullwidth"> @@ -174,9 +165,9 @@ function Table({ {i.timestamp.t_s === "never" ? "never" : format( - new Date(i.timestamp.t_s * 1000), - datetimeFormatForSettings(settings), - )} + new Date(i.timestamp.t_s * 1000), + datetimeFormatForSettings(settings), + )} </td> <td onClick={(): void => onSelect(i)} @@ -217,12 +208,11 @@ function Table({ })} </tbody> </table> - {hasMoreAfter && ( - <button - class="button is-fullwidth" - onClick={onLoadMoreAfter} - > - <i18n.Translate>load older orders</i18n.Translate> + {onLoadMoreAfter && ( + <button class="button is-fullwidth" + data-tooltip={i18n.str`load more orders after the last one`} + onClick={onLoadMoreAfter}> + <i18n.Translate>load next page</i18n.Translate> </button> )} </div> @@ -235,7 +225,7 @@ function EmptyTable(): VNode { <div class="content has-text-grey has-text-centered"> <p> <span class="icon is-large"> - <i class="mdi mdi-emoticon-sad mdi-48px" /> + <i class="mdi mdi-magnify mdi-48px" /> </span> </p> <p> @@ -249,8 +239,8 @@ function EmptyTable(): VNode { interface RefundModalProps { onCancel: () => void; - onConfirm: (value: MerchantBackend.Orders.RefundRequest) => void; - order: MerchantBackend.Orders.MerchantOrderStatusResponse; + onConfirm: (value: TalerMerchantApi.RefundRequest) => void; + order: TalerMerchantApi.MerchantOrderStatusResponse; } export function RefundModal({ @@ -260,7 +250,7 @@ export function RefundModal({ }: RefundModalProps): VNode { type State = { mainReason?: string; description?: string; refund?: string }; const [form, setValue] = useState<State>({}); - const [settings] = useSettings(); + const [settings] = usePreference(); const { i18n } = useTranslationContext(); // const [errors, setErrors] = useState<FormErrors<State>>({}); @@ -268,7 +258,7 @@ export function RefundModal({ order.order_status === "paid" ? order.refund_details : [] ).reduce(mergeRefunds, []); - const config = useConfigContext(); + const { config } = useSessionContext(); const totalRefunded = refunds .map((r) => r.amount) .reduce( @@ -303,7 +293,7 @@ export function RefundModal({ : undefined, }; const hasErrors = Object.keys(errors).some( - (k) => (errors as any)[k] !== undefined, + (k) => (errors as Record<string, unknown>)[k] !== undefined, ); const validateAndConfirm = () => { @@ -362,9 +352,9 @@ export function RefundModal({ {r.timestamp.t_s === "never" ? "never" : format( - new Date(r.timestamp.t_s * 1000), - datetimeFormatForSettings(settings), - )} + new Date(r.timestamp.t_s * 1000), + datetimeFormatForSettings(settings), + )} </td> <td>{r.amount}</td> <td>{r.reason}</td> @@ -382,7 +372,7 @@ export function RefundModal({ <FormProvider<State> errors={errors} object={form} - valueHandler={(d) => setValue(d as any)} + valueHandler={(d) => setValue(d)} > <InputCurrency<State> name="refund" diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx index 34c7d348a..8a1f85b1c 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 @@ -20,81 +20,86 @@ */ import { - ErrorType, - HttpError, - useTranslationContext, + AbsoluteTime, + HttpStatusCode, + TalerError, + TalerMerchantApi, + assertUnreachable, +} from "@gnu-taler/taler-util"; +import { + useTranslationContext } from "@gnu-taler/web-util/browser"; -import { Fragment, h, VNode } from "preact"; +import { VNode, h } from "preact"; import { useState } from "preact/hooks"; +import { ErrorLoadingMerchant } from "../../../../components/ErrorLoadingMerchant.js"; import { Loading } from "../../../../components/exception/loading.js"; +import { JumpToElementById } from "../../../../components/form/JumpToElementById.js"; import { NotificationCard } from "../../../../components/menu/index.js"; -import { MerchantBackend } from "../../../../declaration.js"; +import { useSessionContext } from "../../../../context/session.js"; import { InstanceOrderFilter, useInstanceOrders, - useOrderAPI, useOrderDetails, } from "../../../../hooks/order.js"; import { Notification } from "../../../../utils/types.js"; +import { LoginPage } from "../../../login/index.js"; +import { NotFoundPageOrAdminCreate } from "../../../notfound/index.js"; import { ListPage } from "./ListPage.js"; import { RefundModal } from "./Table.js"; -import { HttpStatusCode } from "@gnu-taler/taler-util"; -import { JumpToElementById } from "../../../../components/form/JumpToElementById.js"; interface Props { - onUnauthorized: () => VNode; - onLoadError: (error: HttpError<MerchantBackend.ErrorDetail>) => VNode; - onNotFound: () => VNode; onSelect: (id: string) => void; onCreate: () => void; } -export default function OrderList({ - onUnauthorized, - onLoadError, - onCreate, - onSelect, - onNotFound, -}: Props): VNode { - const [filter, setFilter] = useState<InstanceOrderFilter>({ paid: "no" }); +export default function OrderList({ onCreate, onSelect }: Props): VNode { + const [filter, setFilter] = useState<InstanceOrderFilter>({ paid: false }); const [orderToBeRefunded, setOrderToBeRefunded] = useState< - MerchantBackend.Orders.OrderHistoryEntry | undefined + TalerMerchantApi.OrderHistoryEntry | undefined >(undefined); - const setNewDate = (date?: Date): void => + const setNewDate = (date?: AbsoluteTime): void => setFilter((prev) => ({ ...prev, date })); - const result = useInstanceOrders(filter, setNewDate); - const { refundOrder, getPaymentURL } = useOrderAPI(); + const result = useInstanceOrders(filter, (d) => + setFilter({ ...filter, position: d }), + ); + const { lib } = useSessionContext(); const [notif, setNotif] = useState<Notification | undefined>(undefined); const { i18n } = useTranslationContext(); + const { state } = useSessionContext(); - if (result.loading) return <Loading />; - if (!result.ok) { - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.NotFound - ) - return onNotFound(); - return onLoadError(result); + if (!result) return <Loading />; + if (result instanceof TalerError) { + return <ErrorLoadingMerchant error={result} />; + } + if (result.type === "fail") { + switch(result.case) { + case HttpStatusCode.NotFound: { + return <NotFoundPageOrAdminCreate />; + } + case HttpStatusCode.Unauthorized: { + return <LoginPage /> + } + default: { + assertUnreachable(result) + } + } } - const isNotPaidActive = filter.paid === "no" ? "is-active" : ""; - const isPaidActive = filter.paid === "yes" && filter.wired === undefined ? "is-active" : ""; - const isRefundedActive = filter.refunded === "yes" ? "is-active" : ""; - const isNotWiredActive = filter.wired === "no" && filter.paid === "yes" ? "is-active" : ""; - const isWiredActive = filter.wired === "yes" ? "is-active" : ""; + const isNotPaidActive = filter.paid === false ? "is-active" : ""; + const isPaidActive = + filter.paid === true && filter.wired === undefined ? "is-active" : ""; + const isRefundedActive = filter.refunded === true ? "is-active" : ""; + const isNotWiredActive = + filter.wired === false && filter.paid === true ? "is-active" : ""; + const isWiredActive = filter.wired === true ? "is-active" : ""; const isAllActive = filter.paid === undefined && - filter.refunded === undefined && - filter.wired === undefined + filter.refunded === undefined && + filter.wired === undefined ? "is-active" : ""; @@ -103,18 +108,19 @@ export default function OrderList({ <NotificationCard notification={notif} /> <JumpToElementById - testIfExist={getPaymentURL} + testIfExist={async (order) => { + const resp = await lib.instance.getOrderDetails(state.token, order); + return resp.type === "ok"; + }} onSelect={onSelect} description={i18n.str`jump to order with the given product ID`} - palceholder={i18n.str`order id`} + placeholder={i18n.str`order id`} /> <ListPage - orders={result.data.orders.map((o) => ({ ...o, id: o.order_id }))} - onLoadMoreBefore={result.loadMorePrev} - hasMoreBefore={!result.isReachingStart} - onLoadMoreAfter={result.loadMore} - hasMoreAfter={!result.isReachingEnd} + orders={result.body.map((o) => ({ ...o, id: o.order_id }))} + onLoadMoreBefore={result.isFirstPage ? undefined : result.loadFirst} + onLoadMoreAfter={result.isLastPage ? undefined : result.loadNext} onSelectOrder={(order) => onSelect(order.id)} onRefundOrder={(value) => setOrderToBeRefunded(value)} isAllActive={isAllActive} @@ -124,25 +130,36 @@ export default function OrderList({ isNotPaidActive={isNotPaidActive} isRefundedActive={isRefundedActive} jumpToDate={filter.date} - onCopyURL={(id) => - getPaymentURL(id).then((resp) => copyToClipboard(resp.data)) - } - onCreate={onCreate} onSelectDate={setNewDate} + onCopyURL={async (id) => { + const resp = await lib.instance.getOrderDetails(state.token, id); + if (resp.type === "ok") { + if (resp.body.order_status === "unpaid") { + copyToClipboard(resp.body.taler_pay_uri); + } else { + if (resp.body.contract_terms.fulfillment_url) { + copyToClipboard(resp.body.contract_terms.fulfillment_url); + } + } + copyToClipboard(resp.body.order_status); + } + }} + onCreate={onCreate} onShowAll={() => setFilter({})} - onShowNotPaid={() => setFilter({ paid: "no" })} - onShowPaid={() => setFilter({ paid: "yes" })} - onShowRefunded={() => setFilter({ refunded: "yes" })} - onShowNotWired={() => setFilter({ wired: "no", paid: "yes" })} - onShowWired={() => setFilter({ wired: "yes" })} + onShowNotPaid={() => setFilter({ paid: false })} + onShowPaid={() => setFilter({ paid: true })} + onShowRefunded={() => setFilter({ refunded: true })} + onShowNotWired={() => setFilter({ wired: false, paid: true })} + onShowWired={() => setFilter({ wired: true })} /> {orderToBeRefunded && ( <RefundModalForTable id={orderToBeRefunded.order_id} onCancel={() => setOrderToBeRefunded(undefined)} - onConfirm={(value) => - refundOrder(orderToBeRefunded.order_id, value) + onConfirm={(value) => { + lib.instance + .addRefund(state.token, orderToBeRefunded.order_id, value) .then(() => setNotif({ message: i18n.str`refund created successfully`, @@ -156,26 +173,7 @@ export default function OrderList({ description: error.message, }), ) - .then(() => setOrderToBeRefunded(undefined)) - } - onLoadError={(error) => { - setNotif({ - message: i18n.str`could not create the refund`, - type: "ERROR", - description: error.message, - }); - setOrderToBeRefunded(undefined); - return <div />; - }} - onUnauthorized={onUnauthorized} - onNotFound={() => { - setNotif({ - message: i18n.str`could not get the order to refund`, - type: "ERROR", - // description: error.message - }); - setOrderToBeRefunded(undefined); - return <div />; + .then(() => setOrderToBeRefunded(undefined)); }} /> )} @@ -185,41 +183,42 @@ export default function OrderList({ interface RefundProps { id: string; - onUnauthorized: () => VNode; - onLoadError: (error: HttpError<MerchantBackend.ErrorDetail>) => VNode; - onNotFound: () => VNode; onCancel: () => void; - onConfirm: (m: MerchantBackend.Orders.RefundRequest) => void; + onConfirm: (m: TalerMerchantApi.RefundRequest) => void; } -function RefundModalForTable({ - id, - onUnauthorized, - onLoadError, - onNotFound, - onConfirm, - onCancel, -}: RefundProps): VNode { +function RefundModalForTable({ id, onConfirm, onCancel }: RefundProps): VNode { const result = useOrderDetails(id); - if (result.loading) return <Loading />; - if (!result.ok) { - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.NotFound - ) - return onNotFound(); - return onLoadError(result); + if (!result) return <Loading />; + if (result instanceof TalerError) { + return <ErrorLoadingMerchant error={result} />; + } + if (result.type === "fail") { + switch (result.case) { + case HttpStatusCode.NotFound: { + return <NotFoundPageOrAdminCreate />; + } + case HttpStatusCode.BadGateway: { + return <div>Failed to obtain a response from the exchange</div>; + } + case HttpStatusCode.GatewayTimeout: { + return ( + <div>The merchant's interaction with the exchange took too long</div> + ); + } + case HttpStatusCode.Unauthorized: { + return <LoginPage /> + } + default: { + assertUnreachable(result); + } + } } return ( <RefundModal - order={result.data} + order={result.body} onCancel={onCancel} onConfirm={onConfirm} /> diff --git a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/Create.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/Create.stories.tsx index 26f851cc8..36b31ebe8 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/Create.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/Create.stories.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 diff --git a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatePage.tsx index 5f1ae26a3..d5522c2d4 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatePage.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,8 +19,13 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { + TalerMerchantApi, + isRfc3548Base32Charset, + randomRfc3548Base32Key, +} from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { Fragment, h, VNode } from "preact"; +import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; import { AsyncButton } from "../../../../components/exception/AsyncButton.js"; import { @@ -28,18 +33,10 @@ import { FormProvider, } from "../../../../components/form/FormProvider.js"; import { Input } from "../../../../components/form/Input.js"; -import { InputCurrency } from "../../../../components/form/InputCurrency.js"; -import { InputDuration } from "../../../../components/form/InputDuration.js"; -import { InputNumber } from "../../../../components/form/InputNumber.js"; -import { useBackendContext } from "../../../../context/backend.js"; -import { MerchantBackend } from "../../../../declaration.js"; import { InputSelector } from "../../../../components/form/InputSelector.js"; import { InputWithAddon } from "../../../../components/form/InputWithAddon.js"; -import { isBase32RFC3548Charset, randomBase32Key } from "../../../../utils/crypto.js"; -import { QR } from "../../../../components/exception/QR.js"; -import { useInstanceContext } from "../../../../context/instance.js"; -type Entity = MerchantBackend.OTP.OtpDeviceAddDetails; +type Entity = TalerMerchantApi.OtpDeviceAddDetails; interface Props { onCreate: (d: Entity) => Promise<void>; @@ -49,32 +46,32 @@ interface Props { const algorithms = [0, 1, 2]; const algorithmsNames = ["off", "30s 8d TOTP-SHA1", "30s 8d eTOTP-SHA1"]; - export function CreatePage({ onCreate, onBack }: Props): VNode { const { i18n } = useTranslationContext(); - const backend = useBackendContext(); const [state, setState] = useState<Partial<Entity>>({}); const [showKey, setShowKey] = useState(false); const errors: FormErrors<Entity> = { - otp_device_id: !state.otp_device_id ? i18n.str`required` + otp_device_id: !state.otp_device_id + ? i18n.str`required` : !/[a-zA-Z0-9]*/.test(state.otp_device_id) ? i18n.str`no valid. only characters and numbers` : undefined, otp_algorithm: !state.otp_algorithm ? i18n.str`required` : undefined, - otp_key: !state.otp_key ? i18n.str`required` : - !isBase32RFC3548Charset(state.otp_key) + otp_key: !state.otp_key + ? i18n.str`required` + : !isRfc3548Base32Charset(state.otp_key) ? i18n.str`just letters and numbers from 2 to 7` : state.otp_key.length !== 32 ? i18n.str`size of the key should be 32` : undefined, - otp_device_description: !state.otp_device_description ? i18n.str`required` + otp_device_description: !state.otp_device_description + ? i18n.str`required` : !/[a-zA-Z0-9]*/.test(state.otp_device_description) ? i18n.str`no valid. only characters and numbers` : undefined, - }; const hasErrors = Object.keys(errors).some( @@ -115,7 +112,7 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { toStr={(v) => algorithmsNames[v]} fromStr={(v) => Number(v)} /> - {state.otp_algorithm && state.otp_algorithm > 0 ? ( + {state.otp_algorithm ? ( <Fragment> <InputWithAddon<Entity> expand @@ -129,7 +126,7 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { setShowKey(!showKey); }} addonAfter={ - <span class="icon" > + <span class="icon"> {showKey ? ( <i class="mdi mdi-eye" /> ) : ( @@ -142,7 +139,11 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { data-tooltip={i18n.str`generate random secret key`} class="button is-info mr-3" onClick={(e) => { - setState((s) => ({ ...s, otp_key: randomBase32Key() })); + setState((s) => ({ + ...s, + otp_key: randomRfc3548Base32Key(), + })); + e.preventDefault(); }} > <i18n.Translate>random</i18n.Translate> diff --git a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatedSuccessfully.tsx index db3842711..7723bec81 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatedSuccessfully.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatedSuccessfully.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 @@ -14,41 +14,35 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ +import { TalerMerchantApi } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { Fragment, VNode, h } from "preact"; +import { VNode, h } from "preact"; import { QR } from "../../../../components/exception/QR.js"; import { CreatedSuccessfully as Template } from "../../../../components/notifications/CreatedSuccessfully.js"; -import { useInstanceContext } from "../../../../context/instance.js"; -import { MerchantBackend } from "../../../../declaration.js"; -import { useBackendContext } from "../../../../context/backend.js"; +import { useSessionContext } from "../../../../context/session.js"; -type Entity = MerchantBackend.OTP.OtpDeviceAddDetails; +type Entity = TalerMerchantApi.OtpDeviceAddDetails; interface Props { entity: Entity; onConfirm: () => void; } -function isNotUndefined<X>(x: X | undefined): x is X { - return !!x; -} - export function CreatedSuccessfully({ entity, onConfirm, }: Props): VNode { const { i18n } = useTranslationContext(); - const { url: backendURL } = useBackendContext() - const { id: instanceId } = useInstanceContext(); - const issuer = new URL(backendURL).hostname; - const qrText = `otpauth://totp/${instanceId}/${entity.otp_device_id}?issuer=${issuer}&algorithm=SHA1&digits=8&period=30&secret=${entity.otp_key}`; - const qrTextSafe = `otpauth://totp/${instanceId}/${entity.otp_device_id}?issuer=${issuer}&algorithm=SHA1&digits=8&period=30&secret=${entity.otp_key.substring(0, 6)}...`; + const { state } = useSessionContext(); + const issuer = state.backendUrl.href; + const qrText = `otpauth://totp/${state.instance}/${entity.otp_device_id}?issuer=${issuer}&algorithm=SHA1&digits=8&period=30&secret=${entity.otp_key}`; + const qrTextSafe = `otpauth://totp/${state.instance}/${entity.otp_device_id}?issuer=${issuer}&algorithm=SHA1&digits=8&period=30&secret=${entity.otp_key.substring(0, 6)}...`; return ( <Template onConfirm={onConfirm} > <p class="is-size-5"> <i18n.Translate> - You can scan the next QR code with your device or safe the key before continue. + You can scan the next QR code with your device or save the key before continuing. </i18n.Translate> </p> <div class="field is-horizontal"> diff --git a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/index.tsx index 648846793..8ab0e1f26 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,28 +19,28 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { TalerMerchantApi } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { Fragment, h, VNode } from "preact"; +import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; import { NotificationCard } from "../../../../components/menu/index.js"; -import { MerchantBackend } from "../../../../declaration.js"; -import { useWebhookAPI } from "../../../../hooks/webhooks.js"; +import { useSessionContext } from "../../../../context/session.js"; import { Notification } from "../../../../utils/types.js"; import { CreatePage } from "./CreatePage.js"; -import { useOtpDeviceAPI } from "../../../../hooks/otp.js"; import { CreatedSuccessfully } from "./CreatedSuccessfully.js"; -export type Entity = MerchantBackend.OTP.OtpDeviceAddDetails; +export type Entity = TalerMerchantApi.OtpDeviceAddDetails; interface Props { onBack?: () => void; onConfirm: () => void; } export default function CreateValidator({ onConfirm, onBack }: Props): VNode { - const { createOtpDevice } = useOtpDeviceAPI(); + const { lib: api } = useSessionContext(); + const { state } = useSessionContext(); const [notif, setNotif] = useState<Notification | undefined>(undefined); const { i18n } = useTranslationContext(); - const [created, setCreated] = useState<MerchantBackend.OTP.OtpDeviceAddDetails | null>(null) + const [created, setCreated] = useState<TalerMerchantApi.OtpDeviceAddDetails | null>(null) if (created) { return <CreatedSuccessfully entity={created} onConfirm={onConfirm} /> @@ -52,7 +52,7 @@ export default function CreateValidator({ onConfirm, onBack }: Props): VNode { <CreatePage onBack={onBack} onCreate={(request: Entity) => { - return createOtpDevice(request) + return api.instance.addOtpDevice(state.token, request) .then((d) => { setCreated(request) }) diff --git a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/List.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/List.stories.tsx index b18049674..49032c80e 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/List.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/List.stories.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 diff --git a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/ListPage.tsx index 4efee9781..8ca0a9c58 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/ListPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/ListPage.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,18 +19,17 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { TalerMerchantApi } from "@gnu-taler/taler-util"; import { h, VNode } from "preact"; -import { MerchantBackend } from "../../../../declaration.js"; -import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { CardTable } from "./Table.js"; export interface Props { - devices: MerchantBackend.OTP.OtpDeviceEntry[]; + devices: TalerMerchantApi.OtpDeviceEntry[]; onLoadMoreBefore?: () => void; onLoadMoreAfter?: () => void; onCreate: () => void; - onDelete: (e: MerchantBackend.OTP.OtpDeviceEntry) => void; - onSelect: (e: MerchantBackend.OTP.OtpDeviceEntry) => void; + onDelete: (e: TalerMerchantApi.OtpDeviceEntry) => void; + onSelect: (e: TalerMerchantApi.OtpDeviceEntry) => void; } export function ListPage({ @@ -41,9 +40,7 @@ export function ListPage({ onLoadMoreBefore, onLoadMoreAfter, }: Props): VNode { - const form = { payto_uri: "" }; - const { i18n } = useTranslationContext(); return ( <section class="section is-main-section"> <CardTable @@ -55,9 +52,7 @@ export function ListPage({ onDelete={onDelete} onSelect={onSelect} onLoadMoreBefore={onLoadMoreBefore} - hasMoreBefore={!onLoadMoreBefore} onLoadMoreAfter={onLoadMoreAfter} - hasMoreAfter={!onLoadMoreAfter} /> </section> ); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/Table.tsx index 0c28027fe..afe3c98e2 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/Table.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/Table.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,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 { StateUpdater, useState } from "preact/hooks"; -import { MerchantBackend } from "../../../../declaration.js"; -type Entity = MerchantBackend.OTP.OtpDeviceEntry; +type Entity = TalerMerchantApi.OtpDeviceEntry; interface Props { devices: Entity[]; @@ -32,8 +32,6 @@ interface Props { onSelect: (e: Entity) => void; onCreate: () => void; onLoadMoreBefore?: () => void; - hasMoreBefore?: boolean; - hasMoreAfter?: boolean; onLoadMoreAfter?: () => void; } @@ -44,8 +42,6 @@ export function CardTable({ onSelect, onLoadMoreAfter, onLoadMoreBefore, - hasMoreAfter, - hasMoreBefore, }: Props): VNode { const [rowSelection, rowSelectionHandler] = useState<string[]>([]); @@ -85,8 +81,6 @@ export function CardTable({ rowSelectionHandler={rowSelectionHandler} onLoadMoreAfter={onLoadMoreAfter} onLoadMoreBefore={onLoadMoreBefore} - hasMoreAfter={hasMoreAfter} - hasMoreBefore={hasMoreBefore} /> ) : ( <EmptyTable /> @@ -104,35 +98,26 @@ interface TableProps { onSelect: (e: Entity) => void; rowSelectionHandler: StateUpdater<string[]>; onLoadMoreBefore?: () => void; - hasMoreBefore?: boolean; - hasMoreAfter?: boolean; onLoadMoreAfter?: () => void; } -function toggleSelected<T>(id: T): (prev: T[]) => T[] { - return (prev: T[]): T[] => - prev.indexOf(id) == -1 ? [...prev, id] : prev.filter((e) => e != id); -} - function Table({ instances, onLoadMoreAfter, onDelete, onSelect, onLoadMoreBefore, - hasMoreAfter, - hasMoreBefore, }: TableProps): VNode { const { i18n } = useTranslationContext(); return ( <div class="table-container"> - {hasMoreBefore && ( + {onLoadMoreBefore && ( <button class="button is-fullwidth" data-tooltip={i18n.str`load more devices before the first one`} onClick={onLoadMoreBefore} > - <i18n.Translate>load newer devices</i18n.Translate> + <i18n.Translate>load first page</i18n.Translate> </button> )} <table class="table is-fullwidth is-striped is-hoverable is-fullwidth"> @@ -161,7 +146,7 @@ function Table({ onClick={(): void => onSelect(i)} style={{ cursor: "pointer" }} > - {i.otp_device_id} + {i.device_description} </td> <td class="is-actions-cell right-sticky"> <div class="buttons is-right"> @@ -179,13 +164,13 @@ function Table({ })} </tbody> </table> - {hasMoreAfter && ( + {onLoadMoreAfter && ( <button class="button is-fullwidth" data-tooltip={i18n.str`load more devices after the last one`} onClick={onLoadMoreAfter} > - <i18n.Translate>load older devices</i18n.Translate> + <i18n.Translate>load next page</i18n.Translate> </button> )} </div> @@ -198,7 +183,7 @@ function EmptyTable(): VNode { <div class="content has-text-grey has-text-centered"> <p> <span class="icon is-large"> - <i class="mdi mdi-emoticon-sad mdi-48px" /> + <i class="mdi mdi-magnify mdi-48px" /> </span> </p> <p> diff --git a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/index.tsx index 2aae8738a..b6a077863 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,55 +19,56 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { HttpStatusCode } from "@gnu-taler/taler-util"; import { - ErrorType, - HttpError, - useTranslationContext, + HttpStatusCode, + TalerError, + TalerMerchantApi, + assertUnreachable +} from "@gnu-taler/taler-util"; +import { + useTranslationContext } from "@gnu-taler/web-util/browser"; import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; +import { ErrorLoadingMerchant } from "../../../../components/ErrorLoadingMerchant.js"; import { Loading } from "../../../../components/exception/loading.js"; import { NotificationCard } from "../../../../components/menu/index.js"; -import { MerchantBackend } from "../../../../declaration.js"; -import { useInstanceOtpDevices, useOtpDeviceAPI } from "../../../../hooks/otp.js"; +import { useSessionContext } from "../../../../context/session.js"; +import { useInstanceOtpDevices } from "../../../../hooks/otp.js"; import { Notification } from "../../../../utils/types.js"; +import { LoginPage } from "../../../login/index.js"; +import { NotFoundPageOrAdminCreate } from "../../../notfound/index.js"; import { ListPage } from "./ListPage.js"; interface Props { - onUnauthorized: () => VNode; - onLoadError: (error: HttpError<MerchantBackend.ErrorDetail>) => VNode; - onNotFound: () => VNode; onCreate: () => void; onSelect: (id: string) => void; } -export default function ListOtpDevices({ - onUnauthorized, - onLoadError, - onCreate, - onSelect, - onNotFound, -}: Props): VNode { - const [position, setPosition] = useState<string | undefined>(undefined); +export default function ListOtpDevices({ onCreate, onSelect }: Props): VNode { + // const [position, setPosition] = useState<string | undefined>(undefined); const { i18n } = useTranslationContext(); const [notif, setNotif] = useState<Notification | undefined>(undefined); - const { deleteOtpDevice } = useOtpDeviceAPI(); - const result = useInstanceOtpDevices({ position }, (id) => setPosition(id)); + const { lib } = useSessionContext(); + const { state } = useSessionContext(); + const result = useInstanceOtpDevices(); - if (result.loading) return <Loading />; - if (!result.ok) { - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.NotFound - ) - return onNotFound(); - return onLoadError(result); + if (!result) return <Loading />; + if (result instanceof TalerError) { + return <ErrorLoadingMerchant error={result} />; + } + if (result.type === "fail") { + switch (result.case) { + case HttpStatusCode.NotFound: { + return <NotFoundPageOrAdminCreate />; + } + case HttpStatusCode.Unauthorized: { + return <LoginPage /> + } + default: { + assertUnreachable(result); + } + } } return ( @@ -75,17 +76,16 @@ export default function ListOtpDevices({ <NotificationCard notification={notif} /> <ListPage - devices={result.data.otp_devices} - onLoadMoreBefore={ - result.isReachingStart ? result.loadMorePrev : undefined - } - onLoadMoreAfter={result.isReachingEnd ? result.loadMore : undefined} + devices={result.body.otp_devices} + onLoadMoreBefore={undefined} //result.isFirstPage ? undefined : result.loadFirst} + onLoadMoreAfter={undefined} //result.isLastPage ? undefined : result.loadNext} onCreate={onCreate} onSelect={(e) => { onSelect(e.otp_device_id); }} - onDelete={(e: MerchantBackend.OTP.OtpDeviceEntry) => - deleteOtpDevice(e.otp_device_id) + onDelete={(e: TalerMerchantApi.OtpDeviceEntry) => { + return lib.instance + .deleteOtpDevice(state.token, e.otp_device_id) .then(() => setNotif({ message: i18n.str`validator delete successfully`, @@ -98,8 +98,8 @@ export default function ListOtpDevices({ type: "ERROR", description: error.message, }), - ) - } + ); + }} /> </Fragment> ); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/Update.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/Update.stories.tsx index d6b1d65e0..06ea9d07a 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/Update.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/Update.stories.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 diff --git a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/UpdatePage.tsx index b82807cc7..35d67cbc6 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/UpdatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/UpdatePage.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,6 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { randomRfc3548Base32Key, TalerMerchantApi } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; @@ -28,12 +29,10 @@ import { FormProvider, } from "../../../../components/form/FormProvider.js"; import { Input } from "../../../../components/form/Input.js"; -import { MerchantBackend, WithId } from "../../../../declaration.js"; import { InputSelector } from "../../../../components/form/InputSelector.js"; import { InputWithAddon } from "../../../../components/form/InputWithAddon.js"; -import { randomBase32Key } from "../../../../utils/crypto.js"; -type Entity = MerchantBackend.OTP.OtpDevicePatchDetails & WithId; +type Entity = TalerMerchantApi.OtpDevicePatchDetails & WithId; interface Props { onUpdate: (d: Entity) => Promise<void>; @@ -48,8 +47,7 @@ export function UpdatePage({ device, onUpdate, onBack }: Props): VNode { const [state, setState] = useState<Partial<Entity>>(device); const [showKey, setShowKey] = useState(false); - const errors: FormErrors<Entity> = { - }; + const errors: FormErrors<Entity> = {}; const hasErrors = Object.keys(errors).some( (k) => (errors as any)[k] !== undefined, @@ -106,16 +104,23 @@ export function UpdatePage({ device, onUpdate, onBack }: Props): VNode { label={i18n.str`Device key`} readonly={state.otp_key === undefined} inputType={showKey ? "text" : "password"} - help={state.otp_key === undefined ? "Not modified" : "Be sure to be very hard to guess or use the random generator"} + help={ + state.otp_key === undefined + ? "Not modified" + : "Be sure to be very hard to guess or use the random generator" + } tooltip={i18n.str`Your device need to have exactly the same value`} fromStr={(v) => v.toUpperCase()} addonAfterAction={() => { setShowKey(!showKey); }} addonAfter={ - <span class="icon" onClick={() => { - setShowKey(!showKey); - }}> + <span + class="icon" + onClick={() => { + setShowKey(!showKey); + }} + > {showKey ? ( <i class="mdi mdi-eye" /> ) : ( @@ -124,25 +129,34 @@ export function UpdatePage({ device, onUpdate, onBack }: Props): VNode { </span> } side={ - state.otp_key === undefined ? <button - - onClick={(e) => { - setState((s) => ({ ...s, otp_key: "" })); - }} - class="button">change key</button> : + state.otp_key === undefined ? ( + <button + onClick={(e) => { + setState((s) => ({ ...s, otp_key: "" })); + }} + class="button" + > + change key + </button> + ) : ( <button data-tooltip={i18n.str`generate random secret key`} class="button is-info mr-3" onClick={(e) => { - setState((s) => ({ ...s, otp_key: randomBase32Key() })); + setState((s) => ({ + ...s, + otp_key: randomRfc3548Base32Key(), + })); }} > <i18n.Translate>random</i18n.Translate> </button> + ) } /> </Fragment> - ) : undefined} </FormProvider> + ) : undefined}{" "} + </FormProvider> <div class="buttons is-right mt-5"> {onBack && ( diff --git a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/index.tsx index 52f6c6c29..99edb95c3 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 @@ -20,57 +20,68 @@ */ import { - ErrorType, - HttpError, - useTranslationContext, + HttpStatusCode, + TalerError, + TalerMerchantApi, + assertUnreachable +} from "@gnu-taler/taler-util"; +import { + useTranslationContext } from "@gnu-taler/web-util/browser"; -import { Fragment, h, VNode } from "preact"; +import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; +import { ErrorLoadingMerchant } from "../../../../components/ErrorLoadingMerchant.js"; import { Loading } from "../../../../components/exception/loading.js"; import { NotificationCard } from "../../../../components/menu/index.js"; -import { MerchantBackend, WithId } from "../../../../declaration.js"; +import { useSessionContext } from "../../../../context/session.js"; +import { useOtpDeviceDetails } from "../../../../hooks/otp.js"; import { Notification } from "../../../../utils/types.js"; +import { LoginPage } from "../../../login/index.js"; +import { NotFoundPageOrAdminCreate } from "../../../notfound/index.js"; +import { CreatedSuccessfully } from "../create/CreatedSuccessfully.js"; import { UpdatePage } from "./UpdatePage.js"; -import { HttpStatusCode } from "@gnu-taler/taler-util"; -import { useOtpDeviceAPI, useOtpDeviceDetails } from "../../../../hooks/otp.js"; -export type Entity = MerchantBackend.OTP.OtpDevicePatchDetails & WithId; +export type Entity = TalerMerchantApi.OtpDevicePatchDetails & WithId; interface Props { onBack?: () => void; onConfirm: () => void; - onUnauthorized: () => VNode; - onNotFound: () => VNode; - onLoadError: (e: HttpError<MerchantBackend.ErrorDetail>) => VNode; vid: string; } export default function UpdateValidator({ vid, onConfirm, onBack, - onUnauthorized, - onNotFound, - onLoadError, }: Props): VNode { - const { updateOtpDevice } = useOtpDeviceAPI(); const result = useOtpDeviceDetails(vid); const [notif, setNotif] = useState<Notification | undefined>(undefined); + const [keyUpdated, setKeyUpdated] = + useState<TalerMerchantApi.OtpDeviceAddDetails | null>(null); + const { lib } = useSessionContext(); + const { state } = useSessionContext(); const { i18n } = useTranslationContext(); - if (result.loading) return <Loading />; - if (!result.ok) { - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.NotFound - ) - return onNotFound(); - return onLoadError(result); + if (!result) return <Loading />; + if (result instanceof TalerError) { + return <ErrorLoadingMerchant error={result} />; + } + if (result.type === "fail") { + switch (result.case) { + case HttpStatusCode.NotFound: { + return <NotFoundPageOrAdminCreate />; + } + case HttpStatusCode.Unauthorized: { + return <LoginPage /> + } + default: { + assertUnreachable(result); + } + } + } + + if (keyUpdated) { + return <CreatedSuccessfully entity={keyUpdated} onConfirm={onConfirm} />; } return ( @@ -79,15 +90,49 @@ export default function UpdateValidator({ <UpdatePage device={{ id: vid, - otp_algorithm: result.data.otp_algorithm, - otp_device_description: result.data.device_description, - otp_key: undefined, - otp_ctr: result.data.otp_ctr + otp_algorithm: result.body.otp_algorithm, + otp_device_description: result.body.device_description, + otp_key: "", + otp_ctr: result.body.otp_ctr, }} onBack={onBack} - onUpdate={(data) => { - return updateOtpDevice(vid, data) - .then(onConfirm) + onUpdate={async (newInfo) => { + return lib.instance + .updateOtpDevice(state.token, vid, newInfo) + .then((d) => { + if (d.type === "ok") { + if (newInfo.otp_key) { + setKeyUpdated({ + otp_algorithm: newInfo.otp_algorithm, + otp_device_description: newInfo.otp_device_description, + otp_device_id: newInfo.id, + otp_key: newInfo.otp_key, + otp_ctr: newInfo.otp_ctr, + }); + } else { + onConfirm(); + } + } else { + switch(d.case) { + case HttpStatusCode.NotFound: { + setNotif({ + message: i18n.str`Could not update template`, + type: "ERROR", + description: i18n.str`Template id is unknown`, + }); + break; + } + case HttpStatusCode.Conflict: { + setNotif({ + message: i18n.str`Could not update template`, + type: "ERROR", + description: i18n.str`The provided information is inconsistent with the current state of the template`, + }); + break; + } + } + } + }) .catch((error) => { setNotif({ message: i18n.str`could not update template`, diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/create/Create.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/create/Create.stories.tsx index 2fc0819bb..22bbfe28a 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/create/Create.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/create/Create.stories.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatePage.tsx index becaf8f3a..64b174f64 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatePage.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,14 +19,14 @@ * @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 { AsyncButton } from "../../../../components/exception/AsyncButton.js"; import { ProductForm } from "../../../../components/product/ProductForm.js"; -import { MerchantBackend } from "../../../../declaration.js"; import { useListener } from "../../../../hooks/listener.js"; -type Entity = MerchantBackend.Products.ProductAddDetail & { +type Entity = TalerMerchantApi.ProductAddDetail & { product_id: string; }; diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatedSuccessfully.tsx index 6b02430cc..2b6ebed45 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatedSuccessfully.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/create/CreatedSuccessfully.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/create/index.tsx index 775690bd1..9de5cae78 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/create/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/create/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,22 +19,23 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { TalerMerchantApi } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { Fragment, h, VNode } from "preact"; +import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; import { NotificationCard } from "../../../../components/menu/index.js"; -import { MerchantBackend } from "../../../../declaration.js"; -import { useProductAPI } from "../../../../hooks/product.js"; +import { useSessionContext } from "../../../../context/session.js"; import { Notification } from "../../../../utils/types.js"; import { CreatePage } from "./CreatePage.js"; -export type Entity = MerchantBackend.Products.ProductAddDetail; +export type Entity = TalerMerchantApi.ProductAddDetail; interface Props { onBack?: () => void; onConfirm: () => void; } export default function CreateProduct({ onConfirm, onBack }: Props): VNode { - const { createProduct } = useProductAPI(); + const { lib } = useSessionContext(); + const { state } = useSessionContext(); const [notif, setNotif] = useState<Notification | undefined>(undefined); const { i18n } = useTranslationContext(); @@ -43,8 +44,8 @@ export default function CreateProduct({ onConfirm, onBack }: Props): VNode { <NotificationCard notification={notif} /> <CreatePage onBack={onBack} - onCreate={(request: MerchantBackend.Products.ProductAddDetail) => { - return createProduct(request) + onCreate={(request: TalerMerchantApi.ProductAddDetail) => { + return lib.instance.addProduct(state.token, request) .then(() => onConfirm()) .catch((error) => { setNotif({ diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/List.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/List.stories.tsx index c2c4d548c..580a92cdc 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/list/List.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/list/List.stories.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,7 +19,8 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode, FunctionalComponent } from "preact"; +import { AmountString } from "@gnu-taler/taler-util"; +import { FunctionalComponent, h } from "preact"; import { CardTable as TestedComponent } from "./Table.js"; export default { @@ -49,7 +50,7 @@ export const Example = createExample(TestedComponent, { description: "description1", description_i18n: {} as any, image: "", - price: "TESTKUDOS:10", + price: "TESTKUDOS:10" as AmountString, taxes: [], total_lost: 10, total_sold: 5, diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx index 275f855cb..39e2fd0c7 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,10 +19,10 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { Amounts } from "@gnu-taler/taler-util"; +import { AmountString, Amounts, TalerMerchantApi } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { format } from "date-fns"; -import { ComponentChildren, Fragment, h, VNode } from "preact"; +import { ComponentChildren, Fragment, VNode, h } from "preact"; import { StateUpdater, useState } from "preact/hooks"; import emptyImage from "../../../../assets/empty.png"; import { @@ -31,10 +31,9 @@ import { } from "../../../../components/form/FormProvider.js"; import { InputCurrency } from "../../../../components/form/InputCurrency.js"; import { InputNumber } from "../../../../components/form/InputNumber.js"; -import { MerchantBackend, WithId } from "../../../../declaration.js"; -import { dateFormatForSettings, useSettings } from "../../../../hooks/useSettings.js"; +import { dateFormatForSettings, usePreference } from "../../../../hooks/preference.js"; -type Entity = MerchantBackend.Products.ProductDetail & WithId; +type Entity = TalerMerchantApi.ProductDetail & WithId; interface Props { instances: Entity[]; @@ -42,10 +41,12 @@ interface Props { onSelect: (product: Entity) => void; onUpdate: ( id: string, - data: MerchantBackend.Products.ProductPatchDetail, + data: TalerMerchantApi.ProductPatchDetail, ) => Promise<void>; onCreate: () => void; selected?: boolean; + onLoadMoreBefore?: () => void; + onLoadMoreAfter?: () => void; } export function CardTable({ @@ -54,6 +55,8 @@ export function CardTable({ onSelect, onUpdate, onDelete, + onLoadMoreAfter, + onLoadMoreBefore }: Props): VNode { const [rowSelection, rowSelectionHandler] = useState<string | undefined>( undefined, @@ -90,6 +93,8 @@ export function CardTable({ onSelect={onSelect} onDelete={onDelete} onUpdate={onUpdate} + onLoadMoreAfter={onLoadMoreAfter} + onLoadMoreBefore={onLoadMoreBefore} rowSelection={rowSelection} rowSelectionHandler={rowSelectionHandler} /> @@ -108,10 +113,12 @@ interface TableProps { onSelect: (id: Entity) => void; onUpdate: ( id: string, - data: MerchantBackend.Products.ProductPatchDetail, + data: TalerMerchantApi.ProductPatchDetail, ) => Promise<void>; onDelete: (id: Entity) => void; rowSelectionHandler: StateUpdater<string | undefined>; + onLoadMoreBefore?: () => void; + onLoadMoreAfter?: () => void; } function Table({ @@ -121,11 +128,18 @@ function Table({ onSelect, onUpdate, onDelete, + onLoadMoreAfter, + onLoadMoreBefore }: TableProps): VNode { const { i18n } = useTranslationContext(); - const [settings] = useSettings(); + const [settings] = usePreference(); return ( <div class="table-container"> + {onLoadMoreBefore && ( + <button class="button is-fullwidth" onClick={onLoadMoreBefore}> + <i18n.Translate>load first page</i18n.Translate> + </button> + )} <table class="table is-fullwidth is-striped is-hoverable is-fullwidth"> <thead> <tr> @@ -197,14 +211,14 @@ function Table({ /> </td> <td - class="has-tooltip-right" + class="has-tooltip-right" data-tooltip={i.description} onClick={() => rowSelection !== i.id && rowSelectionHandler(i.id) } style={{ cursor: "pointer" }} > - {i.description.length > 30 ? i.description.substring(0, 30) + "..." : i.description} + {i.description.length > 30 ? i.description.substring(0, 30) + "..." : i.description} </td> <td onClick={() => @@ -244,9 +258,9 @@ function Table({ } style={{ cursor: "pointer" }} > - <span style={{"whiteSpace":"nowrap"}}> + <span style={{ "whiteSpace": "nowrap" }}> - {i.total_sold} {i.unit} + {i.total_sold} {i.unit} </span> </td> <td class="is-actions-cell right-sticky"> @@ -284,7 +298,7 @@ function Table({ <FastProductUpdateForm product={i} onUpdate={(prod) => - onUpdate(i.id, prod).then((r) => + onUpdate(i.id, prod).then(() => rowSelectionHandler(undefined), ) } @@ -298,6 +312,13 @@ function Table({ })} </tbody> </table> + {onLoadMoreAfter && ( + <button class="button is-fullwidth" + data-tooltip={i18n.str`load more products after the last one`} + onClick={onLoadMoreAfter}> + <i18n.Translate>load next page</i18n.Translate> + </button> + )} </div> ); } @@ -305,7 +326,7 @@ function Table({ interface FastProductUpdateFormProps { product: Entity; onUpdate: ( - data: MerchantBackend.Products.ProductPatchDetail, + data: TalerMerchantApi.ProductPatchDetail, ) => Promise<void>; onCancel: () => void; } @@ -342,12 +363,6 @@ function FastProductWithInfiniteStockUpdateForm({ <div class="buttons is-expanded"> - <div class="buttons mt-5"> - - <button class="button mt-5" onClick={onCancel}> - <i18n.Translate>Clone</i18n.Translate> - </button> - </div> <div class="buttons is-right mt-5"> <button class="button" onClick={onCancel}> <i18n.Translate>Cancel</i18n.Translate> @@ -361,7 +376,7 @@ function FastProductWithInfiniteStockUpdateForm({ onClick={() => onUpdate({ ...product, - price: value.price, + price: value.price as AmountString, }) } > @@ -397,7 +412,7 @@ function FastProductWithManagedStockUpdateForm({ }; const hasErrors = Object.keys(errors).some( - (k) => (errors as any)[k] !== undefined, + (k) => (errors as Record<string,unknown>)[k] !== undefined, ); const { i18n } = useTranslationContext(); @@ -446,7 +461,7 @@ function FastProductWithManagedStockUpdateForm({ ...product, total_stock: product.total_stock + value.incoming, total_lost: product.total_lost + value.lost, - price: value.price, + price: value.price as AmountString, }) } > @@ -472,7 +487,7 @@ function EmptyTable(): VNode { <div class="content has-text-grey has-text-centered"> <p> <span class="icon is-large"> - <i class="mdi mdi-emoticon-sad mdi-48px" /> + <i class="mdi mdi-magnify mdi-48px" /> </span> </p> <p> @@ -491,6 +506,7 @@ function difference(price: string, tax: number) { ps[1] = `${p - tax}`; return ps.join(":"); } -function sum(taxes: MerchantBackend.Tax[]) { +function sum(taxes: TalerMerchantApi.Tax[] | undefined) { + if (taxes === undefined) return 0; return taxes.reduce((p, c) => p + parseInt(c.tax.split(":")[1], 10), 0); } diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx index 942b5d0ac..6ad0d4598 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/list/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,61 +19,59 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { HttpStatusCode, TalerError, TalerMerchantApi, assertUnreachable } from "@gnu-taler/taler-util"; import { - ErrorType, - HttpError, - useTranslationContext, + useTranslationContext } from "@gnu-taler/web-util/browser"; -import { h, VNode } from "preact"; +import { VNode, h } from "preact"; import { useState } from "preact/hooks"; +import { ErrorLoadingMerchant } from "../../../../components/ErrorLoadingMerchant.js"; import { Loading } from "../../../../components/exception/loading.js"; +import { JumpToElementById } from "../../../../components/form/JumpToElementById.js"; import { NotificationCard } from "../../../../components/menu/index.js"; -import { MerchantBackend, WithId } from "../../../../declaration.js"; +import { ConfirmModal } from "../../../../components/modal/index.js"; +import { useSessionContext } from "../../../../context/session.js"; import { - useInstanceProducts, - useProductAPI, + useInstanceProducts } from "../../../../hooks/product.js"; import { Notification } from "../../../../utils/types.js"; +import { LoginPage } from "../../../login/index.js"; +import { NotFoundPageOrAdminCreate } from "../../../notfound/index.js"; import { CardTable } from "./Table.js"; -import { HttpStatusCode } from "@gnu-taler/taler-util"; -import { ConfirmModal, DeleteModal } from "../../../../components/modal/index.js"; -import { JumpToElementById } from "../../../../components/form/JumpToElementById.js"; interface Props { - onUnauthorized: () => VNode; - onNotFound: () => VNode; onCreate: () => void; onSelect: (id: string) => void; - onLoadError: (e: HttpError<MerchantBackend.ErrorDetail>) => VNode; } export default function ProductList({ - onUnauthorized, - onLoadError, onCreate, onSelect, - onNotFound, }: Props): VNode { const result = useInstanceProducts(); - const { deleteProduct, updateProduct, getProduct } = useProductAPI(); + const { lib } = useSessionContext(); + const { state } = useSessionContext(); const [deleting, setDeleting] = - useState<MerchantBackend.Products.ProductDetail & WithId | null>(null); + useState<TalerMerchantApi.ProductDetail & WithId | null>(null); const [notif, setNotif] = useState<Notification | undefined>(undefined); const { i18n } = useTranslationContext(); - if (result.loading) return <Loading />; - if (!result.ok) { - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.NotFound - ) - return onNotFound(); - return onLoadError(result); + if (!result) return <Loading />; + if (result instanceof TalerError) { + return <ErrorLoadingMerchant error={result} />; + } + if (result.type === "fail") { + switch (result.case) { + case HttpStatusCode.NotFound: { + return <NotFoundPageOrAdminCreate />; + } + case HttpStatusCode.Unauthorized: { + return <LoginPage /> + } + default: { + assertUnreachable(result); + } + } } return ( @@ -81,33 +79,38 @@ export default function ProductList({ <NotificationCard notification={notif} /> <JumpToElementById - testIfExist={getProduct} + testIfExist={async (id) => { + const resp = await lib.instance.getProductDetails(state.token, id); + return resp.type === "ok"; + }} onSelect={onSelect} description={i18n.str`jump to product with the given product ID`} - palceholder={i18n.str`product id`} + placeholder={i18n.str`product id`} /> <CardTable - instances={result.data} + instances={result.body} + onLoadMoreBefore={result.isFirstPage ? undefined : result.loadFirst} + onLoadMoreAfter={result.isLastPage ? undefined : result.loadNext} onCreate={onCreate} - onUpdate={(id, prod) => - updateProduct(id, prod) - .then(() => - setNotif({ - message: i18n.str`product updated successfully`, - type: "SUCCESS", - }), - ) - .catch((error) => - setNotif({ - message: i18n.str`could not update the product`, - type: "ERROR", - description: error.message, - }), - ) - } + onUpdate={async (id, prod) => { + try { + await lib.instance.updateProduct(state.token, id, prod); + setNotif({ + message: i18n.str`product updated successfully`, + type: "SUCCESS", + }); + } catch (error) { + setNotif({ + message: i18n.str`could not update the product`, + type: "ERROR", + description: error instanceof Error ? error.message : undefined, + }); + } + return + }} onSelect={(product) => onSelect(product.id)} - onDelete={(prod: MerchantBackend.Products.ProductDetail & WithId) => + onDelete={(prod: TalerMerchantApi.ProductDetail & WithId) => setDeleting(prod) } /> @@ -121,7 +124,7 @@ export default function ProductList({ onCancel={() => setDeleting(null)} onConfirm={async (): Promise<void> => { try { - await deleteProduct(deleting.id); + await lib.instance.deleteProduct(state.token, deleting.id); setNotif({ message: i18n.str`Product "${deleting.description}" (ID: ${deleting.id}) has been deleted`, type: "SUCCESS", diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/update/Update.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/update/Update.stories.tsx index a85b13b8b..7aa93b186 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/update/Update.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/update/Update.stories.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,7 +19,8 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode, FunctionalComponent } from "preact"; +import { AmountString } from "@gnu-taler/taler-util"; +import { FunctionalComponent, h } from "preact"; import { UpdatePage as TestedComponent } from "./UpdatePage.js"; export default { @@ -46,7 +47,7 @@ export const WithManagedStock = createExample(TestedComponent, { description: "description1", description_i18n: {} as any, image: "", - price: "TESTKUDOS:10", + price: "TESTKUDOS:10" as AmountString, taxes: [], total_lost: 10, total_sold: 5, @@ -62,7 +63,7 @@ export const WithInfiniteStock = createExample(TestedComponent, { description: "description1", description_i18n: {} as any, image: "", - price: "TESTKUDOS:10", + price: "TESTKUDOS:10" as AmountString, taxes: [], total_lost: 10, total_sold: 5, diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx index 97715171e..5395ae40f 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,14 +19,14 @@ * @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 { AsyncButton } from "../../../../components/exception/AsyncButton.js"; import { ProductForm } from "../../../../components/product/ProductForm.js"; -import { MerchantBackend } from "../../../../declaration.js"; import { useListener } from "../../../../hooks/listener.js"; -type Entity = MerchantBackend.Products.ProductDetail & { product_id: string }; +type Entity = TalerMerchantApi.ProductDetail & { product_id: string }; interface Props { onUpdate: (d: Entity) => Promise<void>; diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/update/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/update/index.tsx index 8e0f7647f..5e3e58d80 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/products/update/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/products/update/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,67 +19,66 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { HttpStatusCode, TalerError, TalerMerchantApi, assertUnreachable } from "@gnu-taler/taler-util"; import { - ErrorType, - HttpError, - useTranslationContext, + useTranslationContext } from "@gnu-taler/web-util/browser"; -import { Fragment, h, VNode } from "preact"; +import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; +import { ErrorLoadingMerchant } from "../../../../components/ErrorLoadingMerchant.js"; import { Loading } from "../../../../components/exception/loading.js"; import { NotificationCard } from "../../../../components/menu/index.js"; -import { MerchantBackend } from "../../../../declaration.js"; -import { useProductAPI, useProductDetails } from "../../../../hooks/product.js"; +import { useSessionContext } from "../../../../context/session.js"; +import { useProductDetails } from "../../../../hooks/product.js"; import { Notification } from "../../../../utils/types.js"; +import { LoginPage } from "../../../login/index.js"; +import { NotFoundPageOrAdminCreate } from "../../../notfound/index.js"; import { UpdatePage } from "./UpdatePage.js"; -import { HttpStatusCode } from "@gnu-taler/taler-util"; -export type Entity = MerchantBackend.Products.ProductAddDetail; +export type Entity = TalerMerchantApi.ProductAddDetail; interface Props { onBack?: () => void; onConfirm: () => void; - onUnauthorized: () => VNode; - onNotFound: () => VNode; - onLoadError: (e: HttpError<MerchantBackend.ErrorDetail>) => VNode; pid: string; } export default function UpdateProduct({ pid, onConfirm, onBack, - onUnauthorized, - onNotFound, - onLoadError, }: Props): VNode { - const { updateProduct } = useProductAPI(); const result = useProductDetails(pid); const [notif, setNotif] = useState<Notification | undefined>(undefined); + const { lib } = useSessionContext(); + const { state } = useSessionContext(); const { i18n } = useTranslationContext(); - if (result.loading) return <Loading />; - if (!result.ok) { - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.NotFound - ) - return onNotFound(); - return onLoadError(result); + if (!result) return <Loading />; + if (result instanceof TalerError) { + return <ErrorLoadingMerchant error={result} />; + } + if (result.type === "fail") { + switch (result.case) { + case HttpStatusCode.NotFound: { + return <NotFoundPageOrAdminCreate />; + } + case HttpStatusCode.Unauthorized: { + return <LoginPage /> + } + default: { + assertUnreachable(result); + } + } } return ( <Fragment> <NotificationCard notification={notif} /> <UpdatePage - product={{ ...result.data, product_id: pid }} + product={{ ...result.body, product_id: pid }} onBack={onBack} onUpdate={(data) => { - return updateProduct(pid, data) + return lib.instance.updateProduct(state.token, pid, data) .then(onConfirm) .catch((error) => { setNotif({ diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/Create.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/Create.stories.tsx deleted file mode 100644 index 5542c028a..000000000 --- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/Create.stories.tsx +++ /dev/null @@ -1,43 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021-2023 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 { h, VNode, FunctionalComponent } from "preact"; -import { CreatePage as TestedComponent } from "./CreatePage.js"; - -export default { - title: "Pages/Reserve/Create", - component: TestedComponent, - argTypes: { - onCreate: { action: "onCreate" }, - onBack: { action: "onBack" }, - }, -}; - -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, {}); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx deleted file mode 100644 index e46941b6d..000000000 --- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx +++ /dev/null @@ -1,277 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021-2023 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 { HttpError, RequestError, useApiContext, useTranslationContext } from "@gnu-taler/web-util/browser"; -import { Fragment, h, VNode } from "preact"; -import { StateUpdater, useEffect, useState } from "preact/hooks"; -import { AsyncButton } from "../../../../components/exception/AsyncButton.js"; -import { - FormErrors, - FormProvider, -} from "../../../../components/form/FormProvider.js"; -import { Input } from "../../../../components/form/Input.js"; -import { InputCurrency } from "../../../../components/form/InputCurrency.js"; -import { InputSelector } from "../../../../components/form/InputSelector.js"; -import { MerchantBackend } from "../../../../declaration.js"; -import { - PAYTO_WIRE_METHOD_LOOKUP, - URL_REGEX, -} from "../../../../utils/constants.js"; -import { useBackendBaseRequest } from "../../../../hooks/backend.js"; -import { parsePaytoUri } from "@gnu-taler/taler-util"; - -type Entity = MerchantBackend.Rewards.ReserveCreateRequest; - -interface Props { - onCreate: (d: Entity) => Promise<void>; - onBack?: () => void; -} - -enum Steps { - EXCHANGE, - WIRE_METHOD, -} - -interface ViewProps { - step: Steps; - setCurrentStep: (s: Steps) => void; - reserve: Partial<Entity>; - onBack?: () => void; - submitForm: () => Promise<void>; - setReserve: StateUpdater<Partial<Entity>>; -} -function ViewStep({ - step, - setCurrentStep, - reserve, - onBack, - submitForm, - setReserve, -}: ViewProps): VNode { - const { i18n } = useTranslationContext(); - const {request} = useApiContext() - const [wireMethods, setWireMethods] = useState<Array<string>>([]); - const [exchangeQueryError, setExchangeQueryError] = useState< - string | undefined - >(undefined); - - useEffect(() => { - setExchangeQueryError(undefined); - }, [reserve.exchange_url]); - - switch (step) { - case Steps.EXCHANGE: { - const errors: FormErrors<Entity> = { - initial_balance: !reserve.initial_balance - ? "cannot be empty" - : !(parseInt(reserve.initial_balance.split(":")[1], 10) > 0) - ? i18n.str`it should be greater than 0` - : undefined, - exchange_url: !reserve.exchange_url - ? i18n.str`cannot be empty` - : !URL_REGEX.test(reserve.exchange_url) - ? i18n.str`must be a valid URL` - : !exchangeQueryError - ? undefined - : exchangeQueryError, - }; - - const hasErrors = Object.keys(errors).some( - (k) => (errors as any)[k] !== undefined, - ); - - return ( - <Fragment> - <FormProvider<Entity> - object={reserve} - errors={errors} - valueHandler={setReserve} - > - <InputCurrency<Entity> - name="initial_balance" - label={i18n.str`Initial balance`} - tooltip={i18n.str`balance prior to deposit`} - /> - <Input<Entity> - name="exchange_url" - label={i18n.str`Exchange URL`} - tooltip={i18n.str`URL of exchange`} - /> - </FormProvider> - - <div class="buttons is-right mt-5"> - {onBack && ( - <button class="button" onClick={onBack}> - <i18n.Translate>Cancel</i18n.Translate> - </button> - )} - <AsyncButton - class="has-tooltip-left" - onClick={() => { - if (!reserve.exchange_url) { - return Promise.resolve(); - } - - return request<any>(reserve.exchange_url, "keys") - .then((r) => { - console.log(r) - if (r.loading) return; - if (r.ok) { - const wireMethods = r.data.accounts.map((a: any) => { - const p = parsePaytoUri(a.payto_uri); - const r = p?.targetType - return r - }).filter((x:any) => !!x); - setWireMethods(Array.from(new Set(wireMethods))); - } - setCurrentStep(Steps.WIRE_METHOD); - return; - }) - .catch((r: RequestError<{}>) => { - console.log(r.cause) - setExchangeQueryError(r.cause.message); - }); - }} - data-tooltip={ - hasErrors - ? i18n.str`Need to complete marked fields` - : "confirm operation" - } - disabled={hasErrors} - > - <i18n.Translate>Next</i18n.Translate> - </AsyncButton> - </div> - </Fragment> - ); - } - - case Steps.WIRE_METHOD: { - const errors: FormErrors<Entity> = { - wire_method: !reserve.wire_method - ? i18n.str`cannot be empty` - : undefined, - }; - - const hasErrors = Object.keys(errors).some( - (k) => (errors as any)[k] !== undefined, - ); - return ( - <Fragment> - <FormProvider<Entity> - object={reserve} - errors={errors} - valueHandler={setReserve} - > - <InputCurrency<Entity> - name="initial_balance" - label={i18n.str`Initial balance`} - tooltip={i18n.str`balance prior to deposit`} - readonly - /> - <Input<Entity> - name="exchange_url" - label={i18n.str`Exchange URL`} - tooltip={i18n.str`URL of exchange`} - readonly - /> - <InputSelector<Entity> - name="wire_method" - label={i18n.str`Wire method`} - tooltip={i18n.str`method to use for wire transfer`} - values={wireMethods} - placeholder={i18n.str`Select one wire method`} - /> - </FormProvider> - <div class="buttons is-right mt-5"> - {onBack && ( - <button - class="button" - onClick={() => setCurrentStep(Steps.EXCHANGE)} - > - <i18n.Translate>Back</i18n.Translate> - </button> - )} - <AsyncButton - onClick={submitForm} - data-tooltip={ - hasErrors - ? i18n.str`Need to complete marked fields` - : "confirm operation" - } - disabled={hasErrors} - > - <i18n.Translate>Confirm</i18n.Translate> - </AsyncButton> - </div> - </Fragment> - ); - } - } -} - -export function CreatePage({ onCreate, onBack }: Props): VNode { - const [reserve, setReserve] = useState<Partial<Entity>>({}); - - const submitForm = () => { - return onCreate(reserve as Entity); - }; - - const [currentStep, setCurrentStep] = useState(Steps.EXCHANGE); - - return ( - <div> - <section class="section is-main-section"> - <div class="columns"> - <div class="column" /> - <div class="column is-four-fifths"> - <div class="tabs is-toggle is-fullwidth is-small"> - <ul> - <li class={currentStep === Steps.EXCHANGE ? "is-active" : ""}> - <a style={{ cursor: "initial" }}> - <span>Step 1: Specify exchange</span> - </a> - </li> - <li - class={currentStep === Steps.WIRE_METHOD ? "is-active" : ""} - > - <a style={{ cursor: "initial" }}> - <span>Step 2: Select wire method</span> - </a> - </li> - </ul> - </div> - - <ViewStep - step={currentStep} - reserve={reserve} - setCurrentStep={setCurrentStep} - setReserve={setReserve} - submitForm={submitForm} - onBack={onBack} - /> - </div> - <div class="column" /> - </div> - </section> - </div> - ); -} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.stories.tsx deleted file mode 100644 index 445ca3ef0..000000000 --- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.stories.tsx +++ /dev/null @@ -1,120 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021-2023 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 { h, VNode, FunctionalComponent } from "preact"; -import { CreatedSuccessfully as TestedComponent } from "./CreatedSuccessfully.js"; -import * as tests from "@gnu-taler/web-util/testing"; - -export default { - title: "Pages/Reserve/CreatedSuccessfully", - component: TestedComponent, - argTypes: { - onCreate: { action: "onCreate" }, - onBack: { action: "onBack" }, - }, -}; - -export const OneBankAccount = tests.createExample(TestedComponent, { - entity: { - request: { - exchange_url: "http://exchange.taler/", - initial_balance: "TESTKUDOS:1", - wire_method: "x-taler-bank", - }, - response: { - accounts: [ - { - payto_uri: "payto://x-taler-bank/bank.taler:8080/exchange_account", - credit_restrictions: [], - debit_restrictions: [], - master_sig: "asd", - conversion_url: "", - }, - ], - reserve_pub: "WEQWDASDQWEASDADASDQWEQWEASDAS", - }, - }, -}); - -export const ThreeBankAccount = tests.createExample(TestedComponent, { - entity: { - request: { - exchange_url: "http://exchange.taler/", - initial_balance: "TESTKUDOS:1", - wire_method: "x-taler-bank", - }, - response: { - accounts: [ - { - payto_uri: "payto://x-taler-bank/bank.taler:8080/exchange_account", - credit_restrictions: [], - debit_restrictions: [], - master_sig: "asd", - conversion_url: "", - }, - { - payto_uri: "payto://x-taler-bank/bank1.taler:8080/asd", - credit_restrictions: [], - debit_restrictions: [], - master_sig: "asd", - conversion_url: "", - }, - { - payto_uri: "payto://x-taler-bank/bank2.taler:8080/qwe", - credit_restrictions: [], - debit_restrictions: [], - master_sig: "asd", - conversion_url: "", - }, - ], - reserve_pub: "WEQWDASDQWEASDADASDQWEQWEASDAS", - }, - }, -}); - -export const NoBankAccount = tests.createExample(TestedComponent, { - entity: { - request: { - exchange_url: "http://exchange.taler/", - initial_balance: "TESTKUDOS:1", - wire_method: "x-taler-bank", - }, - response: { - accounts: [ - { - payto_uri: "payo://x-talr-bank/bank.taler:8080/exchange_account", - credit_restrictions: [], - debit_restrictions: [], - master_sig: "asd", - conversion_url: "", - }, - { - payto_uri: "payto://x-taler-bank", - credit_restrictions: [], - debit_restrictions: [], - master_sig: "asd", - conversion_url: "", - }, - ], - reserve_pub: "WEQWDASDQWEASDADASDQWEQWEASDAS", - }, - }, -}); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.tsx deleted file mode 100644 index 1d512c843..000000000 --- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.tsx +++ /dev/null @@ -1,190 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021-2023 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/> - */ - -import { parsePaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util"; -import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { Fragment, VNode, h } from "preact"; -import { QR } from "../../../../components/exception/QR.js"; -import { CreatedSuccessfully as Template } from "../../../../components/notifications/CreatedSuccessfully.js"; -import { MerchantBackend, WireAccount } from "../../../../declaration.js"; - -type Entity = { - request: MerchantBackend.Rewards.ReserveCreateRequest; - response: MerchantBackend.Rewards.ReserveCreateConfirmation; -}; - -interface Props { - entity: Entity; - onConfirm: () => void; - onCreateAnother?: () => void; -} - -function isNotUndefined<X>(x: X | undefined): x is X { - return !!x; -} - -export function CreatedSuccessfully({ - entity, - onConfirm, - onCreateAnother, -}: Props): VNode { - const { i18n } = useTranslationContext(); - return ( - <Template onConfirm={onConfirm} onCreateAnother={onCreateAnother}> - <div class="field is-horizontal"> - <div class="field-label is-normal"> - <label class="label">Amount</label> - </div> - <div class="field-body is-flex-grow-3"> - <div class="field"> - <p class="control"> - <input - readonly - class="input" - value={entity.request.initial_balance} - /> - </p> - </div> - </div> - </div> - <div class="field is-horizontal"> - <div class="field-label is-normal"> - <label class="label">Wire transfer subject</label> - </div> - <div class="field-body is-flex-grow-3"> - <div class="field"> - <p class="control"> - <input - class="input" - readonly - value={entity.response.reserve_pub} - /> - </p> - </div> - </div> - </div> - <ShowAccountsOfReserveAsQRWithLink - accounts={entity.response.accounts ?? []} - message={entity.response.reserve_pub} - amount={entity.request.initial_balance} - /> - </Template> - ); -} - -export function ShowAccountsOfReserveAsQRWithLink({ - accounts, - message, - amount, -}: { - accounts: WireAccount[]; - message: string; - amount: string; -}): VNode { - const { i18n } = useTranslationContext(); - const accountsInfo = !accounts - ? [] - : accounts - .map((acc) => { - const p = parsePaytoUri(acc.payto_uri); - if (p) { - p.params["message"] = message; - p.params["amount"] = amount; - } - return p; - }) - .filter(isNotUndefined); - - const links = accountsInfo.map((a) => stringifyPaytoUri(a)); - - if (links.length === 0) { - return ( - <Fragment> - <p class="is-size-5"> - The reserve have invalid accounts. List of invalid payto URIs below: - </p> - <ul> - {accounts.map((a, idx) => { - return <li key={idx}>{a.payto_uri}</li>; - })} - </ul> - </Fragment> - ); - } - - if (links.length === 1) { - return ( - <Fragment> - <p class="is-size-5"> - <i18n.Translate> - To complete the setup of the reserve, you must now initiate a wire - transfer using the given wire transfer subject and crediting the - specified amount to the indicated account of the exchange. - </i18n.Translate> - </p> - <p style={{ margin: 10 }}> - <b>Exchange bank account</b> - </p> - <QR text={links[0]} /> - <p class="is-size-5"> - <i18n.Translate> - If your system supports RFC 8905, you can do this by opening this - URI: - </i18n.Translate> - </p> - <pre> - <a target="_blank" rel="noreferrer" href={links[0]}> - {links[0]} - </a> - </pre> - </Fragment> - ); - } - - return ( - <div> - <p class="is-size-5"> - <i18n.Translate> - To complete the setup of the reserve, you must now initiate a wire - transfer using the given wire transfer subject and crediting the - specified amount to one of the indicated account of the exchange. - </i18n.Translate> - </p> - - <p style={{ margin: 10 }}> - <b>Exchange bank accounts</b> - </p> - <p class="is-size-5"> - <i18n.Translate> - If your system supports RFC 8905, you can do this by clicking on the - URI below the QR code: - </i18n.Translate> - </p> - {links.map((link) => { - return ( - <Fragment> - <QR text={link} /> - <pre> - <a target="_blank" rel="noreferrer" href={link}> - {link} - </a> - </pre> - </Fragment> - ); - })} - </div> - ); -} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/index.tsx deleted file mode 100644 index 4bbaf1459..000000000 --- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/index.tsx +++ /dev/null @@ -1,71 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021-2023 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 { Fragment, h, VNode } from "preact"; -import { useState } from "preact/hooks"; -import { NotificationCard } from "../../../../components/menu/index.js"; -import { MerchantBackend } from "../../../../declaration.js"; -import { useReservesAPI } from "../../../../hooks/reserves.js"; -import { Notification } from "../../../../utils/types.js"; -import { CreatedSuccessfully } from "./CreatedSuccessfully.js"; -import { CreatePage } from "./CreatePage.js"; -interface Props { - onBack: () => void; - onConfirm: () => void; -} -export default function CreateReserve({ onBack, onConfirm }: Props): VNode { - const { createReserve } = useReservesAPI(); - const [notif, setNotif] = useState<Notification | undefined>(undefined); - const { i18n } = useTranslationContext(); - - const [createdOk, setCreatedOk] = useState< - | { - request: MerchantBackend.Rewards.ReserveCreateRequest; - response: MerchantBackend.Rewards.ReserveCreateConfirmation; - } - | undefined - >(undefined); - - if (createdOk) { - return <CreatedSuccessfully entity={createdOk} onConfirm={onConfirm} />; - } - - return ( - <Fragment> - <NotificationCard notification={notif} /> - <CreatePage - onBack={onBack} - onCreate={(request: MerchantBackend.Rewards.ReserveCreateRequest) => { - return createReserve(request) - .then((r) => setCreatedOk({ request, response: r.data })) - .catch((error) => { - setNotif({ - message: i18n.str`could not create reserve`, - type: "ERROR", - description: error.message, - }); - }); - }} - /> - </Fragment> - ); -} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/DetailPage.tsx deleted file mode 100644 index d8840eeac..000000000 --- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/DetailPage.tsx +++ /dev/null @@ -1,266 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021-2023 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 { - Amounts, - parsePaytoUri, - stringifyPaytoUri, -} from "@gnu-taler/taler-util"; -import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { format } from "date-fns"; -import { Fragment, h, VNode } from "preact"; -import { useState } from "preact/hooks"; -import { QR } from "../../../../components/exception/QR.js"; -import { FormProvider } from "../../../../components/form/FormProvider.js"; -import { Input } from "../../../../components/form/Input.js"; -import { InputCurrency } from "../../../../components/form/InputCurrency.js"; -import { InputDate } from "../../../../components/form/InputDate.js"; -import { TextField } from "../../../../components/form/TextField.js"; -import { SimpleModal } from "../../../../components/modal/index.js"; -import { MerchantBackend } from "../../../../declaration.js"; -import { useRewardDetails } from "../../../../hooks/reserves.js"; -import { RewardInfo } from "./RewardInfo.js"; -import { ShowAccountsOfReserveAsQRWithLink } from "../create/CreatedSuccessfully.js"; -import { datetimeFormatForSettings, useSettings } from "../../../../hooks/useSettings.js"; - -type Entity = MerchantBackend.Rewards.ReserveDetail; -type CT = MerchantBackend.ContractTerms; - -interface Props { - onBack: () => void; - selected: Entity; - id: string; -} - -export function DetailPage({ id, selected, onBack }: Props): VNode { - const { i18n } = useTranslationContext(); - const didExchangeAckTransfer = Amounts.isNonZero( - Amounts.parseOrThrow(selected.exchange_initial_amount), - ); - - return ( - <div class="columns"> - <div class="column" /> - <div class="column is-four-fifths"> - <div class="section main-section"> - <FormProvider object={{ ...selected, id }} valueHandler={null}> - <InputDate<Entity> - name="creation_time" - label={i18n.str`Created at`} - readonly - /> - <InputDate<Entity> - name="expiration_time" - label={i18n.str`Valid until`} - readonly - /> - <InputCurrency<Entity> - name="merchant_initial_amount" - label={i18n.str`Created balance`} - readonly - /> - <TextField<Entity> - name="exchange_url" - label={i18n.str`Exchange URL`} - readonly - > - <a target="_blank" rel="noreferrer" href={selected.exchange_url}> - {selected.exchange_url} - </a> - </TextField> - - {didExchangeAckTransfer && ( - <Fragment> - <InputCurrency<Entity> - name="exchange_initial_amount" - label={i18n.str`Exchange balance`} - readonly - /> - <InputCurrency<Entity> - name="pickup_amount" - label={i18n.str`Picked up`} - readonly - /> - <InputCurrency<Entity> - name="committed_amount" - label={i18n.str`Committed`} - readonly - /> - </Fragment> - )} - <Input name="id" label={i18n.str`Subject`} readonly /> - </FormProvider> - - {didExchangeAckTransfer ? ( - <Fragment> - <div class="card has-table"> - <header class="card-header"> - <p class="card-header-title"> - <span class="icon"> - <i class="mdi mdi-cash-register" /> - </span> - <i18n.Translate>Rewards</i18n.Translate> - </p> - </header> - <div class="card-content"> - <div class="b-table has-pagination"> - <div class="table-wrapper has-mobile-cards"> - {selected.rewards && selected.rewards.length > 0 ? ( - <Table rewards={selected.rewards} /> - ) : ( - <EmptyTable /> - )} - </div> - </div> - </div> - </div> - </Fragment> - ) : selected.accounts ? ( - <ShowAccountsOfReserveAsQRWithLink - accounts={selected.accounts} - amount={selected.merchant_initial_amount} - message={id} - /> - ) : undefined} - - <div class="buttons is-right mt-5"> - <button class="button" onClick={onBack}> - <i18n.Translate>Back</i18n.Translate> - </button> - </div> - </div> - </div> - <div class="column" /> - </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-emoticon-sad mdi-48px" /> - </span> - </p> - <p> - <i18n.Translate> - No reward has been authorized from this reserve - </i18n.Translate> - </p> - </div> - ); -} - -interface TableProps { - rewards: MerchantBackend.Rewards.RewardStatusEntry[]; -} - -function Table({ rewards }: TableProps): VNode { - const { i18n } = useTranslationContext(); - return ( - <div class="table-container"> - <table class="table is-fullwidth is-striped is-hoverable is-fullwidth"> - <thead> - <tr> - <th> - <i18n.Translate>Authorized</i18n.Translate> - </th> - <th> - <i18n.Translate>Picked up</i18n.Translate> - </th> - <th> - <i18n.Translate>Reason</i18n.Translate> - </th> - <th> - <i18n.Translate>Expiration</i18n.Translate> - </th> - </tr> - </thead> - <tbody> - {rewards.map((t, i) => { - return <RewardRow id={t.reward_id} key={i} entry={t} />; - })} - </tbody> - </table> - </div> - ); -} - -function RewardRow({ - id, - entry, -}: { - id: string; - entry: MerchantBackend.Rewards.RewardStatusEntry; -}) { - const [selected, setSelected] = useState(false); - const result = useRewardDetails(id); - const [settings] = useSettings(); - if (result.loading) { - return ( - <tr> - <td>...</td> - <td>...</td> - <td>...</td> - <td>...</td> - </tr> - ); - } - if (!result.ok) { - return ( - <tr> - <td>...</td> {/* authorized */} - <td>{entry.total_amount}</td> - <td>{entry.reason}</td> - <td>...</td> {/* expired */} - </tr> - ); - } - const info = result.data; - function onSelect() { - setSelected(true); - } - return ( - <Fragment> - {selected && ( - <SimpleModal - description="reward" - active - onCancel={() => setSelected(false)} - > - <RewardInfo id={id} amount={info.total_authorized} entity={info} /> - </SimpleModal> - )} - <tr> - <td onClick={onSelect}>{info.total_authorized}</td> - <td onClick={onSelect}>{info.total_picked_up}</td> - <td onClick={onSelect}>{info.reason}</td> - <td onClick={onSelect}> - {info.expiration.t_s === "never" - ? "never" - : format(info.expiration.t_s * 1000, datetimeFormatForSettings(settings))} - </td> - </tr> - </Fragment> - ); -} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/Details.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/Details.stories.tsx deleted file mode 100644 index 41c715f20..000000000 --- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/Details.stories.tsx +++ /dev/null @@ -1,126 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021-2023 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 { h, VNode, FunctionalComponent } from "preact"; -import { DetailPage as TestedComponent } from "./DetailPage.js"; - -export default { - title: "Pages/Reserve/Detail", - component: TestedComponent, - argTypes: { - onUpdate: { action: "onUpdate" }, - onBack: { action: "onBack" }, - }, -}; - -function createExample<Props>( - Component: FunctionalComponent<Props>, - props: Partial<Props>, -) { - const r = (args: any) => <Component {...args} />; - r.args = props; - return r; -} - -export const Funded = createExample(TestedComponent, { - id: "THISISTHERESERVEID", - selected: { - active: true, - committed_amount: "TESTKUDOS:10", - creation_time: { - t_s: new Date().getTime() / 1000, - }, - exchange_initial_amount: "TESTKUDOS:10", - expiration_time: { - t_s: new Date().getTime() / 1000, - }, - merchant_initial_amount: "TESTKUDOS:10", - pickup_amount: "TESTKUDOS:10", - accounts: [ - { - payto_uri: "payto://x-taler-bank/bank.taler:8080/account", - credit_restrictions: [], - debit_restrictions: [], - master_sig: "", - }, - ], - exchange_url: "http://exchange.taler/", - }, -}); - -export const NotYetFunded = createExample(TestedComponent, { - id: "THISISTHERESERVEID", - selected: { - active: true, - committed_amount: "TESTKUDOS:10", - creation_time: { - t_s: new Date().getTime() / 1000, - }, - exchange_initial_amount: "TESTKUDOS:0", - expiration_time: { - t_s: new Date().getTime() / 1000, - }, - merchant_initial_amount: "TESTKUDOS:10", - pickup_amount: "TESTKUDOS:10", - accounts: [ - { - payto_uri: "payto://x-taler-bank/bank.taler:8080/account", - credit_restrictions: [], - debit_restrictions: [], - master_sig: "", - }, - ], - exchange_url: "http://exchange.taler/", - }, -}); - -export const FundedWithEmptyRewards = createExample(TestedComponent, { - id: "THISISTHERESERVEID", - selected: { - active: true, - committed_amount: "TESTKUDOS:10", - creation_time: { - t_s: new Date().getTime() / 1000, - }, - exchange_initial_amount: "TESTKUDOS:10", - expiration_time: { - t_s: new Date().getTime() / 1000, - }, - merchant_initial_amount: "TESTKUDOS:10", - pickup_amount: "TESTKUDOS:10", - accounts: [ - { - payto_uri: "payto://x-taler-bank/bank.taler:8080/account", - credit_restrictions: [], - debit_restrictions: [], - master_sig: "", - }, - ], - exchange_url: "http://exchange.taler/", - rewards: [ - { - reason: "asdasd", - reward_id: "123", - total_amount: "TESTKUDOS:1", - }, - ], - }, -}); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/RewardInfo.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/RewardInfo.tsx deleted file mode 100644 index 780068a91..000000000 --- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/RewardInfo.tsx +++ /dev/null @@ -1,88 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021-2023 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/> - */ -import { stringifyRewardUri } from "@gnu-taler/taler-util"; -import { format } from "date-fns"; -import { Fragment, h, VNode } from "preact"; -import { useBackendContext } from "../../../../context/backend.js"; -import { MerchantBackend } from "../../../../declaration.js"; -import { datetimeFormatForSettings, useSettings } from "../../../../hooks/useSettings.js"; - -type Entity = MerchantBackend.Rewards.RewardDetails; - -interface Props { - id: string; - entity: Entity; - amount: string; -} - -export function RewardInfo({ id: merchantRewardId, amount, entity }: Props): VNode { - const { url: backendURL } = useBackendContext() - const [settings] = useSettings(); - const rewardURL = stringifyRewardUri({ merchantBaseUrl: backendURL, merchantRewardId }) - return ( - <Fragment> - <div class="field is-horizontal"> - <div class="field-label is-normal"> - <label class="label">Amount</label> - </div> - <div class="field-body is-flex-grow-3"> - <div class="field"> - <p class="control"> - <input readonly class="input" value={amount} /> - </p> - </div> - </div> - </div> - <div class="field is-horizontal"> - <div class="field-label is-normal"> - <label class="label">URL</label> - </div> - <div class="field-body is-flex-grow-3"> - <div class="field" style={{ overflowWrap: "anywhere" }}> - <p class="control"> - <a target="_blank" rel="noreferrer" href={rewardURL}> - {rewardURL} - </a> - </p> - </div> - </div> - </div> - <div class="field is-horizontal"> - <div class="field-label is-normal"> - <label class="label">Valid until</label> - </div> - <div class="field-body is-flex-grow-3"> - <div class="field"> - <p class="control"> - <input - class="input" - readonly - value={ - !entity.expiration || entity.expiration.t_s === "never" - ? "never" - : format( - entity.expiration.t_s * 1000, - datetimeFormatForSettings(settings), - ) - } - /> - </p> - </div> - </div> - </div> - </Fragment> - ); -} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/index.tsx deleted file mode 100644 index 8e2a74529..000000000 --- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/index.tsx +++ /dev/null @@ -1,68 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021-2023 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 { ErrorType, HttpError } from "@gnu-taler/web-util/browser"; -import { Fragment, h, VNode } from "preact"; -import { Loading } from "../../../../components/exception/loading.js"; -import { MerchantBackend } from "../../../../declaration.js"; -import { useReserveDetails } from "../../../../hooks/reserves.js"; -import { DetailPage } from "./DetailPage.js"; -import { HttpStatusCode } from "@gnu-taler/taler-util"; - -interface Props { - rid: string; - - onUnauthorized: () => VNode; - onLoadError: (error: HttpError<MerchantBackend.ErrorDetail>) => VNode; - onNotFound: () => VNode; - onDelete: () => void; - onBack: () => void; -} -export default function DetailReserve({ - rid, - onUnauthorized, - onLoadError, - onNotFound, - onBack, - onDelete, -}: Props): VNode { - const result = useReserveDetails(rid); - - if (result.loading) return <Loading />; - if (!result.ok) { - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.NotFound - ) - return onNotFound(); - return onLoadError(result); - } - return ( - <Fragment> - <DetailPage selected={result.data} onBack={onBack} id={rid} /> - </Fragment> - ); -} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/AutorizeRewardModal.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/AutorizeRewardModal.tsx deleted file mode 100644 index e205ee621..000000000 --- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/AutorizeRewardModal.tsx +++ /dev/null @@ -1,124 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021-2023 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 { useState } from "preact/hooks"; -import * as yup from "yup"; -import { - FormErrors, - FormProvider, -} from "../../../../components/form/FormProvider.js"; -import { Input } from "../../../../components/form/Input.js"; -import { InputCurrency } from "../../../../components/form/InputCurrency.js"; -import { - ConfirmModal, - ContinueModal, -} from "../../../../components/modal/index.js"; -import { MerchantBackend } from "../../../../declaration.js"; -import { AuthorizeRewardSchema } from "../../../../schemas/index.js"; -import { CreatedSuccessfully } from "./CreatedSuccessfully.js"; - -interface AuthorizeRewardModalProps { - onCancel: () => void; - onConfirm: (value: MerchantBackend.Rewards.RewardCreateRequest) => void; - rewardAuthorized?: { - response: MerchantBackend.Rewards.RewardCreateConfirmation; - request: MerchantBackend.Rewards.RewardCreateRequest; - }; -} - -export function AuthorizeRewardModal({ - onCancel, - onConfirm, - rewardAuthorized, -}: AuthorizeRewardModalProps): VNode { - // const result = useOrderDetails(id) - type State = MerchantBackend.Rewards.RewardCreateRequest; - const [form, setValue] = useState<Partial<State>>({}); - const { i18n } = useTranslationContext(); - - // const [errors, setErrors] = useState<FormErrors<State>>({}) - let errors: FormErrors<State> = {}; - try { - AuthorizeRewardSchema.validateSync(form, { abortEarly: false }); - } catch (err) { - if (err instanceof yup.ValidationError) { - const yupErrors = err.inner as any[]; - errors = yupErrors.reduce( - (prev, cur) => - !cur.path ? prev : { ...prev, [cur.path]: cur.message }, - {}, - ); - } - } - const hasErrors = Object.keys(errors).some( - (k) => (errors as any)[k] !== undefined, - ); - - const validateAndConfirm = () => { - onConfirm(form as State); - }; - if (rewardAuthorized) { - return ( - <ContinueModal description="reward" active onConfirm={onCancel}> - <CreatedSuccessfully - entity={rewardAuthorized.response} - request={rewardAuthorized.request} - onConfirm={onCancel} - /> - </ContinueModal> - ); - } - - return ( - <ConfirmModal - description="New reward" - active - onCancel={onCancel} - disabled={hasErrors} - onConfirm={validateAndConfirm} - > - <FormProvider<State> - errors={errors} - object={form} - valueHandler={setValue} - > - <InputCurrency<State> - name="amount" - label={i18n.str`Amount`} - tooltip={i18n.str`amount of reward`} - /> - <Input<State> - name="justification" - label={i18n.str`Justification`} - inputType="multiline" - tooltip={i18n.str`reason for the reward`} - /> - <Input<State> - name="next_url" - label={i18n.str`URL after reward`} - tooltip={i18n.str`URL to visit after reward payment`} - /> - </FormProvider> - </ConfirmModal> - ); -} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/CreatedSuccessfully.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/CreatedSuccessfully.tsx deleted file mode 100644 index b78236bc7..000000000 --- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/CreatedSuccessfully.tsx +++ /dev/null @@ -1,102 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021-2023 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/> - */ -import { format } from "date-fns"; -import { Fragment, h, VNode } from "preact"; -import { CreatedSuccessfully as Template } from "../../../../components/notifications/CreatedSuccessfully.js"; -import { MerchantBackend } from "../../../../declaration.js"; -import { datetimeFormatForSettings, useSettings } from "../../../../hooks/useSettings.js"; - -type Entity = MerchantBackend.Rewards.RewardCreateConfirmation; - -interface Props { - entity: Entity; - request: MerchantBackend.Rewards.RewardCreateRequest; - onConfirm: () => void; - onCreateAnother?: () => void; -} - -export function CreatedSuccessfully({ - request, - entity, - onConfirm, - onCreateAnother, -}: Props): VNode { - const [settings] = useSettings(); - return ( - <Fragment> - <div class="field is-horizontal"> - <div class="field-label is-normal"> - <label class="label">Amount</label> - </div> - <div class="field-body is-flex-grow-3"> - <div class="field"> - <p class="control"> - <input readonly class="input" value={request.amount} /> - </p> - </div> - </div> - </div> - <div class="field is-horizontal"> - <div class="field-label is-normal"> - <label class="label">Justification</label> - </div> - <div class="field-body is-flex-grow-3"> - <div class="field"> - <p class="control"> - <input readonly class="input" value={request.justification} /> - </p> - </div> - </div> - </div> - <div class="field is-horizontal"> - <div class="field-label is-normal"> - <label class="label">URL</label> - </div> - <div class="field-body is-flex-grow-3"> - <div class="field"> - <p class="control"> - <input readonly class="input" value={entity.reward_status_url} /> - </p> - </div> - </div> - </div> - <div class="field is-horizontal"> - <div class="field-label is-normal"> - <label class="label">Valid until</label> - </div> - <div class="field-body is-flex-grow-3"> - <div class="field"> - <p class="control"> - <input - class="input" - readonly - value={ - !entity.reward_expiration || - entity.reward_expiration.t_s === "never" - ? "never" - : format( - entity.reward_expiration.t_s * 1000, - datetimeFormatForSettings(settings), - ) - } - /> - </p> - </div> - </div> - </div> - </Fragment> - ); -} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/List.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/List.stories.tsx deleted file mode 100644 index b070bbde3..000000000 --- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/List.stories.tsx +++ /dev/null @@ -1,96 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021-2023 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 { h, VNode, FunctionalComponent } from "preact"; -import { CardTable as TestedComponent } from "./Table.js"; - -export default { - title: "Pages/Reserve/List", - component: TestedComponent, -}; - -function createExample<Props>( - Component: FunctionalComponent<Props>, - props: Partial<Props>, -) { - const r = (args: any) => <Component {...args} />; - r.args = props; - return r; -} - -export const AllFunded = createExample(TestedComponent, { - instances: [ - { - id: "reseverId", - active: true, - committed_amount: "TESTKUDOS:10", - creation_time: { - t_s: new Date().getTime() / 1000, - }, - exchange_initial_amount: "TESTKUDOS:10", - expiration_time: { - t_s: new Date().getTime() / 1000, - }, - merchant_initial_amount: "TESTKUDOS:10", - pickup_amount: "TESTKUDOS:10", - reserve_pub: "WEQWDASDQWEASDADASDQWEQWEASDAS", - }, - { - id: "reseverId2", - active: true, - committed_amount: "TESTKUDOS:13", - creation_time: { - t_s: new Date().getTime() / 1000, - }, - exchange_initial_amount: "TESTKUDOS:10", - expiration_time: { - t_s: new Date().getTime() / 1000, - }, - merchant_initial_amount: "TESTKUDOS:10", - pickup_amount: "TESTKUDOS:10", - reserve_pub: "WEQWDASDQWEASDADASDQWEQWEASDAS", - }, - ], -}); - -export const Empty = createExample(TestedComponent, { - instances: [], -}); - -export const OneNotYetFunded = createExample(TestedComponent, { - instances: [ - { - id: "reseverId", - active: true, - committed_amount: "TESTKUDOS:0", - creation_time: { - t_s: new Date().getTime() / 1000, - }, - exchange_initial_amount: "TESTKUDOS:0", - expiration_time: { - t_s: new Date().getTime() / 1000, - }, - merchant_initial_amount: "TESTKUDOS:10", - pickup_amount: "TESTKUDOS:10", - reserve_pub: "WEQWDASDQWEASDADASDQWEQWEASDAS", - }, - ], -}); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/Table.tsx deleted file mode 100644 index 795e7ec82..000000000 --- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/Table.tsx +++ /dev/null @@ -1,320 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021-2023 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 { format } from "date-fns"; -import { Fragment, h, VNode } from "preact"; -import { MerchantBackend, WithId } from "../../../../declaration.js"; -import { datetimeFormatForSettings, useSettings } from "../../../../hooks/useSettings.js"; - -type Entity = MerchantBackend.Rewards.ReserveStatusEntry & WithId; - -interface Props { - instances: Entity[]; - onNewReward: (id: Entity) => void; - onSelect: (id: Entity) => void; - onDelete: (id: Entity) => void; - onCreate: () => void; -} - -export function CardTable({ - instances, - onCreate, - onSelect, - onNewReward, - onDelete, -}: Props): VNode { - const [withoutFunds, withFunds] = instances.reduce((prev, current) => { - const amount = current.exchange_initial_amount; - if (amount.endsWith(":0")) { - prev[0] = prev[0].concat(current); - } else { - prev[1] = prev[1].concat(current); - } - return prev; - }, new Array<Array<Entity>>([], [])); - - const { i18n } = useTranslationContext(); - - return ( - <Fragment> - {withoutFunds.length > 0 && ( - <div class="card has-table"> - <header class="card-header"> - <p class="card-header-title"> - <span class="icon"> - <i class="mdi mdi-cash" /> - </span> - <i18n.Translate>Reserves not yet funded</i18n.Translate> - </p> - </header> - <div class="card-content"> - <div class="b-table has-pagination"> - <div class="table-wrapper has-mobile-cards"> - <TableWithoutFund - instances={withoutFunds} - onNewReward={onNewReward} - onSelect={onSelect} - onDelete={onDelete} - /> - </div> - </div> - </div> - </div> - )} - - <div class="card has-table"> - <header class="card-header"> - <p class="card-header-title"> - <span class="icon"> - <i class="mdi mdi-cash" /> - </span> - <i18n.Translate>Reserves ready</i18n.Translate> - </p> - <div class="card-header-icon" aria-label="more options" /> - <div class="card-header-icon" aria-label="more options"> - <span - class="has-tooltip-left" - data-tooltip={i18n.str`add new reserve`} - > - <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"> - {withFunds.length > 0 ? ( - <Table - instances={withFunds} - onNewReward={onNewReward} - onSelect={onSelect} - onDelete={onDelete} - /> - ) : ( - <EmptyTable /> - )} - </div> - </div> - </div> - </div> - </Fragment> - ); -} -interface TableProps { - instances: Entity[]; - onNewReward: (id: Entity) => void; - onDelete: (id: Entity) => void; - onSelect: (id: Entity) => void; -} - -function Table({ instances, onNewReward, onSelect, onDelete }: TableProps): VNode { - const { i18n } = useTranslationContext(); - const [settings] = useSettings(); - return ( - <div class="table-container"> - <table class="table is-fullwidth is-striped is-hoverable is-fullwidth"> - <thead> - <tr> - <th> - <i18n.Translate>Created at</i18n.Translate> - </th> - <th> - <i18n.Translate>Expires at</i18n.Translate> - </th> - <th> - <i18n.Translate>Initial</i18n.Translate> - </th> - <th> - <i18n.Translate>Picked up</i18n.Translate> - </th> - <th> - <i18n.Translate>Committed</i18n.Translate> - </th> - <th /> - </tr> - </thead> - <tbody> - {instances.map((i) => { - return ( - <tr key={i.id}> - <td - onClick={(): void => onSelect(i)} - style={{ cursor: "pointer" }} - > - {i.creation_time.t_s === "never" - ? "never" - : format(i.creation_time.t_s * 1000, datetimeFormatForSettings(settings))} - </td> - <td - onClick={(): void => onSelect(i)} - style={{ cursor: "pointer" }} - > - {i.expiration_time.t_s === "never" - ? "never" - : format( - i.expiration_time.t_s * 1000, - datetimeFormatForSettings(settings), - )} - </td> - <td - onClick={(): void => onSelect(i)} - style={{ cursor: "pointer" }} - > - {i.exchange_initial_amount} - </td> - <td - onClick={(): void => onSelect(i)} - style={{ cursor: "pointer" }} - > - {i.pickup_amount} - </td> - <td - onClick={(): void => onSelect(i)} - style={{ cursor: "pointer" }} - > - {i.committed_amount} - </td> - <td class="is-actions-cell right-sticky"> - <div class="buttons is-right"> - <button - class="button is-small is-danger has-tooltip-left" - data-tooltip={i18n.str`delete selected reserve from the database`} - type="button" - onClick={(): void => onDelete(i)} - > - Delete - </button> - <button - class="button is-small is-info has-tooltip-left" - data-tooltip={i18n.str`authorize new reward from selected reserve`} - type="button" - onClick={(): void => onNewReward(i)} - > - New Reward - </button> - </div> - </td> - </tr> - ); - })} - </tbody> - </table> - </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-emoticon-sad mdi-48px" /> - </span> - </p> - <p> - <i18n.Translate> - There is no ready reserves yet, add more pressing the + sign or fund - them - </i18n.Translate> - </p> - </div> - ); -} - -function TableWithoutFund({ - instances, - onSelect, - onDelete, -}: TableProps): VNode { - const { i18n } = useTranslationContext(); - const [settings] = useSettings(); - return ( - <div class="table-container"> - <table class="table is-fullwidth is-striped is-hoverable is-fullwidth"> - <thead> - <tr> - <th> - <i18n.Translate>Created at</i18n.Translate> - </th> - <th> - <i18n.Translate>Expires at</i18n.Translate> - </th> - <th> - <i18n.Translate>Expected Balance</i18n.Translate> - </th> - <th /> - </tr> - </thead> - <tbody> - {instances.map((i) => { - return ( - <tr key={i.id}> - <td - onClick={(): void => onSelect(i)} - style={{ cursor: "pointer" }} - > - {i.creation_time.t_s === "never" - ? "never" - : format(i.creation_time.t_s * 1000, datetimeFormatForSettings(settings))} - </td> - <td - onClick={(): void => onSelect(i)} - style={{ cursor: "pointer" }} - > - {i.expiration_time.t_s === "never" - ? "never" - : format( - i.expiration_time.t_s * 1000, - datetimeFormatForSettings(settings), - )} - </td> - <td - onClick={(): void => onSelect(i)} - style={{ cursor: "pointer" }} - > - {i.merchant_initial_amount} - </td> - <td class="is-actions-cell right-sticky"> - <div class="buttons is-right"> - <button - class="button is-small is-danger jb-modal has-tooltip-left" - type="button" - data-tooltip={i18n.str`delete selected reserve from the database`} - onClick={(): void => onDelete(i)} - > - Delete - </button> - </div> - </td> - </tr> - ); - })} - </tbody> - </table> - </div> - ); -} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/index.tsx deleted file mode 100644 index b26ff0000..000000000 --- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/index.tsx +++ /dev/null @@ -1,171 +0,0 @@ -/* - This file is part of GNU Taler - (C) 2021-2023 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 { - ErrorType, - HttpError, - useTranslationContext, -} from "@gnu-taler/web-util/browser"; -import { h, VNode } from "preact"; -import { useState } from "preact/hooks"; -import { Loading } from "../../../../components/exception/loading.js"; -import { NotificationCard } from "../../../../components/menu/index.js"; -import { MerchantBackend } from "../../../../declaration.js"; -import { - useInstanceReserves, - useReservesAPI, -} from "../../../../hooks/reserves.js"; -import { Notification } from "../../../../utils/types.js"; -import { AuthorizeRewardModal } from "./AutorizeRewardModal.js"; -import { CardTable } from "./Table.js"; -import { HttpStatusCode } from "@gnu-taler/taler-util"; -import { ConfirmModal } from "../../../../components/modal/index.js"; - -interface Props { - onUnauthorized: () => VNode; - onLoadError: (e: HttpError<MerchantBackend.ErrorDetail>) => VNode; - onSelect: (id: string) => void; - onNotFound: () => VNode; - onCreate: () => void; -} - -interface RewardConfirmation { - response: MerchantBackend.Rewards.RewardCreateConfirmation; - request: MerchantBackend.Rewards.RewardCreateRequest; -} - -export default function ListRewards({ - onUnauthorized, - onLoadError, - onNotFound, - onSelect, - onCreate, -}: Props): VNode { - const result = useInstanceReserves(); - const { deleteReserve, authorizeRewardReserve } = useReservesAPI(); - const [notif, setNotif] = useState<Notification | undefined>(undefined); - const { i18n } = useTranslationContext(); - const [reserveForReward, setReserveForReward] = useState<string | undefined>( - undefined, - ); - const [deleting, setDeleting] = - useState<MerchantBackend.Rewards.ReserveStatusEntry | null>(null); - const [rewardAuthorized, setRewardAuthorized] = useState< - RewardConfirmation | undefined - >(undefined); - - if (result.loading) return <Loading />; - if (!result.ok) { - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.NotFound - ) - return onNotFound(); - return onLoadError(result); - } - - return ( - <section class="section is-main-section"> - <NotificationCard notification={notif} /> - - {reserveForReward && ( - <AuthorizeRewardModal - onCancel={() => { - setReserveForReward(undefined); - setRewardAuthorized(undefined); - }} - rewardAuthorized={rewardAuthorized} - onConfirm={async (request) => { - try { - const response = await authorizeRewardReserve( - reserveForReward, - request, - ); - setRewardAuthorized({ - request, - response: response.data, - }); - } catch (error) { - setNotif({ - message: i18n.str`could not create the reward`, - type: "ERROR", - description: error instanceof Error ? error.message : undefined, - }); - setReserveForReward(undefined); - } - }} - /> - )} - - <CardTable - instances={result.data.reserves - .filter((r) => r.active) - .map((o) => ({ ...o, id: o.reserve_pub }))} - onCreate={onCreate} - onDelete={(reserve) => { - setDeleting(reserve) - }} - onSelect={(reserve) => onSelect(reserve.id)} - onNewReward={(reserve) => setReserveForReward(reserve.id)} - /> - - {deleting && ( - <ConfirmModal - label={`Delete reserve`} - description={`Delete the reserve`} - danger - active - onCancel={() => setDeleting(null)} - onConfirm={async (): Promise<void> => { - try { - await deleteReserve(deleting.reserve_pub); - setNotif({ - message: i18n.str`Reserve for "${deleting.merchant_initial_amount}" (ID: ${deleting.reserve_pub}) has been deleted`, - type: "SUCCESS", - }); - } catch (error) { - setNotif({ - message: i18n.str`Failed to delete reserve`, - type: "ERROR", - description: error instanceof Error ? error.message : undefined, - }); - } - setDeleting(null); - }} - > - <p> - If you delete the reserve for <b>"{deleting.merchant_initial_amount}"</b> you won't be able to create more rewards. <br /> - Reserve ID: <b>{deleting.reserve_pub}</b> - </p> - <p class="warning"> - Deleting an template <b>cannot be undone</b>. - </p> - </ConfirmModal> - )} - - </section> - ); -} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/create/Create.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/create/Create.stories.tsx index c9d17ea3b..53025f153 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/templates/create/Create.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/create/Create.stories.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx index 947f3572c..50262be17 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 @@ -20,10 +20,16 @@ */ import { + AmountString, Amounts, - MerchantTemplateContractDetails, + Duration, + TalerError, + TalerMerchantApi, + TranslatedString, } from "@gnu-taler/taler-util"; -import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { + useTranslationContext +} from "@gnu-taler/web-util/browser"; import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; import { AsyncButton } from "../../../../components/exception/AsyncButton.js"; @@ -35,109 +41,133 @@ import { Input } from "../../../../components/form/Input.js"; import { InputCurrency } from "../../../../components/form/InputCurrency.js"; import { InputDuration } from "../../../../components/form/InputDuration.js"; import { InputNumber } from "../../../../components/form/InputNumber.js"; -import { InputSearchOnList } from "../../../../components/form/InputSearchOnList.js"; +import { InputSelector } from "../../../../components/form/InputSelector.js"; +import { InputToggle } from "../../../../components/form/InputToggle.js"; import { InputWithAddon } from "../../../../components/form/InputWithAddon.js"; -import { useBackendContext } from "../../../../context/backend.js"; -import { MerchantBackend } from "../../../../declaration.js"; +import { TextField } from "../../../../components/form/TextField.js"; +import { useSessionContext } from "../../../../context/session.js"; import { useInstanceOtpDevices } from "../../../../hooks/otp.js"; -import { undefinedIfEmpty } from "../../../../utils/table.js"; -import { InputTab } from "../../../../components/form/InputTab.js"; - -enum Steps { - BOTH_FIXED, - FIXED_PRICE, - FIXED_SUMMARY, - NON_FIXED, -} -type Entity = MerchantBackend.Template.TemplateAddDetails & { type: Steps }; +// type Entity = TalerMerchantApi.TemplateAddDetails & { type: Steps }; +type Entity = { + id?: string; + description?: string; + otpId?: string; + summary?: string; + amount?: AmountString; + minimum_age?: number; + pay_duration?: Duration; + summary_editable?: boolean; + amount_editable?: boolean; + currency_editable?: boolean; +}; interface Props { - onCreate: (d: Entity) => Promise<void>; + onCreate: (d: TalerMerchantApi.TemplateAddDetails) => Promise<void>; onBack?: () => void; } export function CreatePage({ onCreate, onBack }: Props): VNode { const { i18n } = useTranslationContext(); - const { url: backendURL } = useBackendContext() - const devices = useInstanceOtpDevices() + const { config } = useSessionContext(); + const { state: session } = useSessionContext(); + const devices = useInstanceOtpDevices(); const [state, setState] = useState<Partial<Entity>>({ - template_contract: { - minimum_age: 0, - pay_duration: { - d_us: 1000 * 1000 * 60 * 30, //30 min - }, + minimum_age: 0, + pay_duration: { + d_ms: 1000 * 60 * 30, //30 min }, - type: Steps.NON_FIXED, }); - const parsedPrice = !state.template_contract?.amount - ? undefined - : Amounts.parse(state.template_contract?.amount); + function updateState(up: (s: Partial<Entity>) => Partial<Entity>) { + setState((old) => { + const newState = up(old); + if (!newState.amount_editable) { + newState.currency_editable = false; + } + return newState; + }); + } + + const parsedPrice = !state.amount ? undefined : Amounts.parse(state.amount); const errors: FormErrors<Entity> = { - template_id: !state.template_id + id: !state.id ? i18n.str`should not be empty` - : !/[a-zA-Z0-9]*/.test(state.template_id) + : !/[a-zA-Z0-9]*/.test(state.id) ? i18n.str`no valid. only characters and numbers` : undefined, - template_description: !state.template_description - ? i18n.str`should not be empty` - : undefined, - template_contract: !state.template_contract - ? undefined - : undefinedIfEmpty({ - amount: !(state.type === Steps.FIXED_PRICE || state.type === Steps.BOTH_FIXED) - ? undefined - : !state.template_contract?.amount - ? i18n.str`required` - : !parsedPrice - ? i18n.str`not valid` - : Amounts.isZero(parsedPrice) - ? i18n.str`must be greater than 0` - : undefined, - summary: !(state.type === Steps.FIXED_SUMMARY || state.type === Steps.BOTH_FIXED) - ? undefined - : !state.template_contract?.summary - ? i18n.str`required` - : undefined, - minimum_age: - state.template_contract.minimum_age < 0 - ? i18n.str`should be greater that 0` - : undefined, - pay_duration: !state.template_contract.pay_duration - ? i18n.str`can't be empty` - : state.template_contract.pay_duration.d_us === "forever" - ? undefined - : state.template_contract.pay_duration.d_us < 1000 * 1000 //less than one second - ? i18n.str`to short` - : undefined, - } as Partial<MerchantTemplateContractDetails>), + description: !state.description ? i18n.str`should not be empty` : undefined, + amount: !state.amount + ? state.amount_editable ? undefined : i18n.str`required` + : !parsedPrice + ? i18n.str`not valid` + : Amounts.isZero(parsedPrice) + ? state.amount_editable ? undefined : i18n.str`must be greater than 0` + : undefined, + minimum_age: + state.minimum_age && state.minimum_age < 0 + ? i18n.str`should be greater that 0` + : undefined, + pay_duration: !state.pay_duration + ? i18n.str`can't be empty` + : state.pay_duration.d_ms === "forever" + ? undefined + : state.pay_duration.d_ms < 1000 //less than one second + ? i18n.str`to short` + : undefined, }; + const cList = Object.values(config.currencies).map((d) => d.name); + const hasErrors = Object.keys(errors).some( - (k) => (errors as any)[k] !== undefined, + (k) => (errors as Record<string, unknown>)[k] !== undefined, ); + const zero = Amounts.stringify(Amounts.zeroOfCurrency(config.currency)) + const submitForm = () => { if (hasErrors) return Promise.reject(); - if (state.template_contract) { - if (state.type === Steps.NON_FIXED) { - delete state.template_contract.amount; - delete state.template_contract.summary; - } else if (state.type === Steps.FIXED_SUMMARY) { - delete state.template_contract.amount; - } else if (state.type === Steps.FIXED_PRICE) { - delete state.template_contract.summary; - } + const contract_amount = state.amount_editable ? undefined : state.amount as AmountString + const contract_summary = state.summary_editable ? undefined : state.summary + const template_contract: TalerMerchantApi.TemplateContractDetails = { + minimum_age: state.minimum_age!, + pay_duration: Duration.toTalerProtocolDuration(state.pay_duration!), + amount: contract_amount, + summary: contract_summary, + currency: + cList.length > 1 && state.currency_editable + ? undefined + : config.currency, } - delete state.type - return onCreate(state as any); + return onCreate({ + template_id: state.id!, + template_description: state.description!, + template_contract, + required_currency: contract_amount !== undefined ? undefined : config.currency, + editable_defaults: { + amount: !state.amount_editable ? undefined : (state.amount ?? zero), + summary: !state.summary_editable ? undefined : (state.summary ?? ""), + currency: + cList.length === 1 || !state.currency_editable + ? undefined + : config.currency, + }, + otp_id: state.otpId!, + }); }; - - const deviceList = !devices.ok ? [] : devices.data.otp_devices - + const deviceList = + !devices || devices instanceof TalerError || devices.type === "fail" + ? [] + : devices.body.otp_devices; + const deviceMap = deviceList.reduce( + (prev, cur) => { + prev[cur.otp_device_id] = cur.device_description as TranslatedString; + return prev; + }, + {} as Record<string, TranslatedString>, + ); return ( <div> <section class="section is-main-section"> @@ -146,90 +176,99 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { <div class="column is-four-fifths"> <FormProvider object={state} - valueHandler={setState} + valueHandler={updateState} errors={errors} > <InputWithAddon<Entity> - name="template_id" - help={`${backendURL}/templates/${state.template_id ?? ""}`} + name="id" + help={ + new URL(`templates/${state.id ?? ""}`, session.backendUrl.href).href + } label={i18n.str`Identifier`} tooltip={i18n.str`Name of the template in URLs.`} /> <Input<Entity> - name="template_description" + name="description" label={i18n.str`Description`} help="" tooltip={i18n.str`Describe what this template stands for`} /> - <InputTab - name="type" - label={i18n.str`Type`} - help={(() => { - switch (state.type) { - case Steps.NON_FIXED: return i18n.str`User will be able to input price and summary before payment.` - case Steps.FIXED_PRICE: return i18n.str`User will be able to add a summary before payment.` - case Steps.FIXED_SUMMARY: return i18n.str`User will be able to set the price before payment.` - case Steps.BOTH_FIXED: return i18n.str`User will not be able to change the price or the summary.` - } - })()} - tooltip={i18n.str`Define what the user be allowed to modify`} - values={[ - Steps.NON_FIXED, - Steps.FIXED_PRICE, - Steps.FIXED_SUMMARY, - Steps.BOTH_FIXED, - ]} - toStr={(v: Steps): string => { - switch (v) { - case Steps.NON_FIXED: return i18n.str`Simple` - case Steps.FIXED_PRICE: return i18n.str`With price` - case Steps.FIXED_SUMMARY: return i18n.str`With summary` - case Steps.BOTH_FIXED: return i18n.str`With price and summary` - } - }} + + <Input<Entity> + name="summary" + inputType="multiline" + label={i18n.str`Summary`} + tooltip={i18n.str`If specified, this template will create order with the same summary`} /> - {state.type === Steps.BOTH_FIXED || state.type === Steps.FIXED_SUMMARY ? - <Input - name="template_contract.summary" - inputType="multiline" - label={i18n.str`Fixed summary`} - tooltip={i18n.str`If specified, this template will create order with the same summary`} - /> - : undefined} - {state.type === Steps.BOTH_FIXED || state.type === Steps.FIXED_PRICE ? - <InputCurrency - name="template_contract.amount" - label={i18n.str`Fixed price`} - tooltip={i18n.str`If specified, this template will create order with the same price`} - /> - : undefined} - <InputNumber - name="template_contract.minimum_age" + <InputToggle<Entity> + name="summary_editable" + label={i18n.str`Summary is editable`} + tooltip={i18n.str`Allow the user to change the summary.`} + /> + + <InputCurrency<Entity> + name="amount" + label={i18n.str`Amount`} + tooltip={i18n.str`If specified, this template will create order with the same price`} + /> + <InputToggle<Entity> + name="amount_editable" + label={i18n.str`Amount is editable`} + tooltip={i18n.str`Allow the user to select the amount to pay.`} + /> + {cList.length > 1 && ( + <Fragment> + <InputToggle<Entity> + name="currency_editable" + readonly={!state.amount_editable} + label={i18n.str`Currency is editable`} + tooltip={i18n.str`Allow the user to change currency.`} + /> + <TextField name="sc" label={i18n.str`Supported currencies`}> + <i18n.Translate>supported currencies: {cList.join(", ")}</i18n.Translate> + </TextField> + </Fragment> + )} + <InputNumber<Entity> + name="minimum_age" label={i18n.str`Minimum age`} help="" tooltip={i18n.str`Is this contract restricted to some age?`} /> - <InputDuration - name="template_contract.pay_duration" + <InputDuration<Entity> + name="pay_duration" label={i18n.str`Payment timeout`} help="" tooltip={i18n.str`How much time has the customer to complete the payment once the order was created.`} /> - <Input<Entity> - name="otp_id" - label={i18n.str`OTP device`} - readonly - tooltip={i18n.str`Use to verify transaction in offline mode.`} - /> - <InputSearchOnList - label={i18n.str`Search device`} - onChange={(p) => setState((v) => ({ ...v, otp_id: p?.id }))} - list={deviceList.map(e => ({ - description: e.device_description, - id: e.otp_device_id - }))} - /> - + {!deviceList.length ? ( + <TextField + name="otpId" + label={i18n.str`OTP device`} + tooltip={i18n.str`Use to verify transaction while offline.`} + > + <i18n.Translate>No OTP device.</i18n.Translate> + <a href="/otp-devices/new"> + <i18n.Translate>Add one first</i18n.Translate> + </a> + </TextField> + ) : ( + <InputSelector<Entity> + name="otpId" + label={i18n.str`OTP device`} + values={[ + undefined, + ...deviceList.map((e) => e.otp_device_id), + ]} + toStr={(v?: string) => { + if (!v) { + return i18n.str`No device`; + } + return deviceMap[v]; + }} + tooltip={i18n.str`Use to verify transaction in offline mode.`} + /> + )} </FormProvider> <div class="buttons is-right mt-5"> diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/create/index.tsx index a29ee53b6..499c7c859 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/templates/create/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/create/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,23 +19,24 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { TalerMerchantApi } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { Fragment, h, VNode } from "preact"; +import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; import { NotificationCard } from "../../../../components/menu/index.js"; -import { MerchantBackend } from "../../../../declaration.js"; -import { useTemplateAPI } from "../../../../hooks/templates.js"; +import { useSessionContext } from "../../../../context/session.js"; import { Notification } from "../../../../utils/types.js"; import { CreatePage } from "./CreatePage.js"; -export type Entity = MerchantBackend.Transfers.TransferInformation; +export type Entity = TalerMerchantApi.TransferInformation; interface Props { onBack?: () => void; onConfirm: () => void; } export default function CreateTransfer({ onConfirm, onBack }: Props): VNode { - const { createTemplate } = useTemplateAPI(); + const { lib } = useSessionContext(); + const { state } = useSessionContext(); const [notif, setNotif] = useState<Notification | undefined>(undefined); const { i18n } = useTranslationContext(); @@ -44,8 +45,8 @@ export default function CreateTransfer({ onConfirm, onBack }: Props): VNode { <NotificationCard notification={notif} /> <CreatePage onBack={onBack} - onCreate={(request: MerchantBackend.Template.TemplateAddDetails) => { - return createTemplate(request) + onCreate={(request: TalerMerchantApi.TemplateAddDetails) => { + return lib.instance.addTemplate(state.token, request) .then(() => onConfirm()) .catch((error) => { setNotif({ diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/list/List.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/list/List.stories.tsx index 702e9ba4a..707324d40 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/templates/list/List.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/list/List.stories.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/list/ListPage.tsx index bf6062c34..66d8a2f7e 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/templates/list/ListPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/list/ListPage.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,20 +19,19 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { TalerMerchantApi } from "@gnu-taler/taler-util"; import { h, VNode } from "preact"; -import { MerchantBackend } from "../../../../declaration.js"; -import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { CardTable } from "./Table.js"; export interface Props { - templates: MerchantBackend.Template.TemplateEntry[]; + templates: TalerMerchantApi.TemplateEntry[]; onLoadMoreBefore?: () => void; onLoadMoreAfter?: () => void; onCreate: () => void; - onDelete: (e: MerchantBackend.Template.TemplateEntry) => void; - onSelect: (e: MerchantBackend.Template.TemplateEntry) => void; - onNewOrder: (e: MerchantBackend.Template.TemplateEntry) => void; - onQR: (e: MerchantBackend.Template.TemplateEntry) => void; + onDelete: (e: TalerMerchantApi.TemplateEntry) => void; + onSelect: (e: TalerMerchantApi.TemplateEntry) => void; + onNewOrder: (e: TalerMerchantApi.TemplateEntry) => void; + onQR: (e: TalerMerchantApi.TemplateEntry) => void; } export function ListPage({ @@ -45,9 +44,7 @@ export function ListPage({ onLoadMoreBefore, onLoadMoreAfter, }: Props): VNode { - const form = { payto_uri: "" }; - const { i18n } = useTranslationContext(); return ( <CardTable templates={templates.map((o) => ({ @@ -60,9 +57,7 @@ export function ListPage({ onSelect={onSelect} onNewOrder={onNewOrder} onLoadMoreBefore={onLoadMoreBefore} - hasMoreBefore={!onLoadMoreBefore} onLoadMoreAfter={onLoadMoreAfter} - hasMoreAfter={!onLoadMoreAfter} /> ); } diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/list/Table.tsx index 9fdf4ead9..082e622e3 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/templates/list/Table.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/list/Table.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,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 { StateUpdater, useState } from "preact/hooks"; -import { MerchantBackend } from "../../../../declaration.js"; -type Entity = MerchantBackend.Template.TemplateEntry; +type Entity = TalerMerchantApi.TemplateEntry; interface Props { templates: Entity[]; @@ -34,8 +34,6 @@ interface Props { onQR: (e: Entity) => void; onCreate: () => void; onLoadMoreBefore?: () => void; - hasMoreBefore?: boolean; - hasMoreAfter?: boolean; onLoadMoreAfter?: () => void; } @@ -48,8 +46,6 @@ export function CardTable({ onNewOrder, onLoadMoreAfter, onLoadMoreBefore, - hasMoreAfter, - hasMoreBefore, }: Props): VNode { const [rowSelection, rowSelectionHandler] = useState<string[]>([]); @@ -91,8 +87,6 @@ export function CardTable({ rowSelectionHandler={rowSelectionHandler} onLoadMoreAfter={onLoadMoreAfter} onLoadMoreBefore={onLoadMoreBefore} - hasMoreAfter={hasMoreAfter} - hasMoreBefore={hasMoreBefore} /> ) : ( <EmptyTable /> @@ -112,16 +106,9 @@ interface TableProps { onSelect: (e: Entity) => void; rowSelectionHandler: StateUpdater<string[]>; onLoadMoreBefore?: () => void; - hasMoreBefore?: boolean; - hasMoreAfter?: boolean; onLoadMoreAfter?: () => void; } -function toggleSelected<T>(id: T): (prev: T[]) => T[] { - return (prev: T[]): T[] => - prev.indexOf(id) == -1 ? [...prev, id] : prev.filter((e) => e != id); -} - function Table({ instances, onLoadMoreAfter, @@ -130,19 +117,17 @@ function Table({ onQR, onSelect, onLoadMoreBefore, - hasMoreAfter, - hasMoreBefore, }: TableProps): VNode { const { i18n } = useTranslationContext(); return ( <div class="table-container"> - {hasMoreBefore && ( + {onLoadMoreBefore && ( <button class="button is-fullwidth" data-tooltip={i18n.str`load more templates before the first one`} onClick={onLoadMoreBefore} > - <i18n.Translate>load newer templates</i18n.Translate> + <i18n.Translate>load first page</i18n.Translate> </button> )} <table class="table is-fullwidth is-striped is-hoverable is-fullwidth"> @@ -203,13 +188,13 @@ function Table({ })} </tbody> </table> - {hasMoreAfter && ( + {onLoadMoreAfter && ( <button class="button is-fullwidth" data-tooltip={i18n.str`load more templates after the last one`} onClick={onLoadMoreAfter} > - <i18n.Translate>load older templates</i18n.Translate> + <i18n.Translate>load next page</i18n.Translate> </button> )} </div> @@ -222,7 +207,7 @@ function EmptyTable(): VNode { <div class="content has-text-grey has-text-centered"> <p> <span class="icon is-large"> - <i class="mdi mdi-emoticon-sad mdi-48px" /> + <i class="mdi mdi-magnify mdi-48px" /> </span> </p> <p> diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/list/index.tsx index b9767442f..fce14dcc3 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/templates/list/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/list/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,27 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { HttpStatusCode, TalerError, TalerMerchantApi, assertUnreachable } from "@gnu-taler/taler-util"; import { - ErrorType, - HttpError, - useTranslationContext, + useTranslationContext } from "@gnu-taler/web-util/browser"; -import { Fragment, h, VNode } from "preact"; +import { VNode, h } from "preact"; import { useState } from "preact/hooks"; +import { ErrorLoadingMerchant } from "../../../../components/ErrorLoadingMerchant.js"; import { Loading } from "../../../../components/exception/loading.js"; +import { JumpToElementById } from "../../../../components/form/JumpToElementById.js"; import { NotificationCard } from "../../../../components/menu/index.js"; -import { MerchantBackend } from "../../../../declaration.js"; +import { ConfirmModal } from "../../../../components/modal/index.js"; +import { useSessionContext } from "../../../../context/session.js"; import { - useInstanceTemplates, - useTemplateAPI, + useInstanceTemplates } from "../../../../hooks/templates.js"; import { Notification } from "../../../../utils/types.js"; +import { LoginPage } from "../../../login/index.js"; +import { NotFoundPageOrAdminCreate } from "../../../notfound/index.js"; import { ListPage } from "./ListPage.js"; -import { HttpStatusCode, TranslatedString } from "@gnu-taler/taler-util"; -import { ConfirmModal } from "../../../../components/modal/index.js"; -import { JumpToElementById } from "../../../../components/form/JumpToElementById.js"; interface Props { - onUnauthorized: () => VNode; - onLoadError: (error: HttpError<MerchantBackend.ErrorDetail>) => VNode; - onNotFound: () => VNode; onCreate: () => void; onSelect: (id: string) => void; onNewOrder: (id: string) => void; @@ -50,35 +47,35 @@ interface Props { } export default function ListTemplates({ - onUnauthorized, - onLoadError, onCreate, onQR, onSelect, onNewOrder, - onNotFound, }: Props): VNode { - const [position, setPosition] = useState<string | undefined>(undefined); const { i18n } = useTranslationContext(); const [notif, setNotif] = useState<Notification | undefined>(undefined); - const { deleteTemplate, testTemplateExist } = useTemplateAPI(); - const result = useInstanceTemplates({ position }, (id) => setPosition(id)); + const { lib } = useSessionContext(); + const result = useInstanceTemplates(); const [deleting, setDeleting] = - useState<MerchantBackend.Template.TemplateEntry | null>(null); + useState<TalerMerchantApi.TemplateEntry | null>(null); + const { state } = useSessionContext(); - if (result.loading) return <Loading />; - if (!result.ok) { - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.NotFound - ) - return onNotFound(); - return onLoadError(result); + if (!result) return <Loading /> + if (result instanceof TalerError) { + return <ErrorLoadingMerchant error={result} /> + } + if (result.type === "fail") { + switch(result.case) { + case HttpStatusCode.NotFound: { + return <NotFoundPageOrAdminCreate /> + } + case HttpStatusCode.Unauthorized: { + return <LoginPage /> + } + default: { + assertUnreachable(result) + } + } } return ( @@ -86,18 +83,26 @@ export default function ListTemplates({ <NotificationCard notification={notif} /> <JumpToElementById - testIfExist={testTemplateExist} + testIfExist={async (id) => { + const resp = await lib.instance.getTemplateDetails(state.token, id) + return resp.type === "ok" + }} onSelect={onSelect} description={i18n.str`jump to template with the given template ID`} - palceholder={i18n.str`template id`} + placeholder={i18n.str`template id`} /> <ListPage - templates={result.data.templates} - onLoadMoreBefore={ - result.isReachingStart ? result.loadMorePrev : undefined - } - onLoadMoreAfter={result.isReachingEnd ? result.loadMore : undefined} + // templates={result.body} + // onLoadMoreBefore={ + // result.isFirstPage ? undefined: result.loadFirst + // } + // onLoadMoreAfter={result.isLastPage ? undefined : result.loadNext} + + templates={result.body.templates} + onLoadMoreBefore={undefined} + onLoadMoreAfter={undefined} + onCreate={onCreate} onSelect={(e) => { onSelect(e.template_id); @@ -108,7 +113,7 @@ export default function ListTemplates({ onQR={(e) => { onQR(e.template_id); }} - onDelete={(e: MerchantBackend.Template.TemplateEntry) => { + onDelete={(e: TalerMerchantApi.TemplateEntry) => { setDeleting(e) } } @@ -123,7 +128,7 @@ export default function ListTemplates({ onCancel={() => setDeleting(null)} onConfirm={async (): Promise<void> => { try { - await deleteTemplate(deleting.template_id); + await lib.instance.deleteTemplate(state.token, deleting.template_id); setNotif({ message: i18n.str`Template "${deleting.template_description}" (ID: ${deleting.template_id}) has been deleted`, type: "SUCCESS", diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/Qr.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/Qr.stories.tsx index eb853c8ff..c0059c7bc 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/Qr.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/Qr.stories.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/QrPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/QrPage.tsx index 5140aae3a..547996ea1 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/QrPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/QrPage.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,113 +19,102 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { stringifyPayTemplateUri } from "@gnu-taler/taler-util"; -import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { + TalerMerchantApi, + stringifyPayTemplateUri +} from "@gnu-taler/taler-util"; +import { + useTranslationContext +} from "@gnu-taler/web-util/browser"; import { VNode, h } from "preact"; -import { useState } from "preact/hooks"; import { QR } from "../../../../components/exception/QR.js"; -import { - FormErrors, - FormProvider, -} from "../../../../components/form/FormProvider.js"; -import { Input } from "../../../../components/form/Input.js"; -import { InputCurrency } from "../../../../components/form/InputCurrency.js"; -import { useBackendContext } from "../../../../context/backend.js"; -import { useConfigContext } from "../../../../context/config.js"; -import { useInstanceContext } from "../../../../context/instance.js"; -import { MerchantBackend } from "../../../../declaration.js"; - -type Entity = MerchantBackend.Template.UsingTemplateDetails; +import { useSessionContext } from "../../../../context/session.js"; + +// type Entity = TalerMerchantApi.UsingTemplateDetails; interface Props { - contract: MerchantBackend.Template.TemplateContractDetails; + contract: TalerMerchantApi.TemplateContractDetails; id: string; onBack?: () => void; } -export function QrPage({ contract, id: templateId, onBack }: Props): VNode { +export function QrPage({ id: templateId, onBack }: Props): VNode { const { i18n } = useTranslationContext(); - const { url: backendURL } = useBackendContext() - const { id: instanceId } = useInstanceContext(); - const config = useConfigContext(); + const { state } = useSessionContext(); - const [state, setState] = useState<Partial<Entity>>({ - amount: contract.amount, - summary: contract.summary, - }); + // const [state, setState] = useState<Partial<Entity>>({ + // amount: contract.amount, + // summary: contract.summary, + // }); - const errors: FormErrors<Entity> = {}; + // const errors: FormErrors<Entity> = {}; - const fixedAmount = !!contract.amount; - const fixedSummary = !!contract.summary; + // const fixedAmount = !!contract.amount; + // const fixedSummary = !!contract.summary; - const templateParams: Record<string, string> = {} - if (!fixedAmount) { - if (state.amount) { - templateParams.amount = state.amount - } else { - templateParams.amount = config.currency - } - } + // const templateParams: Record<string, string> = {}; + // if (!fixedAmount) { + // if (state.amount) { + // templateParams.amount = state.amount; + // } else { + // templateParams.amount = config.currency; + // } + // } - if (!fixedSummary) { - templateParams.summary = state.summary ?? "" - } + // if (!fixedSummary) { + // templateParams.summary = state.summary ?? ""; + // } - const merchantBaseUrl = new URL(backendURL).href; + const merchantBaseUrl = state.backendUrl.href; const payTemplateUri = stringifyPayTemplateUri({ merchantBaseUrl, templateId, - templateParams - }) - - const issuer = encodeURIComponent( - `${new URL(backendURL).host}/${instanceId}`, - ); + // FIXME! + //templateParams: {}, + }); return ( <div> + <section id="printThis"> + <QR text={payTemplateUri} /> + <pre style={{ textAlign: "center" }}> + <a target="_blank" rel="noreferrer" href={payTemplateUri}>{payTemplateUri}</a> + </pre> + </section> + <section class="section is-main-section"> <div class="columns"> <div class="column" /> <div class="column is-four-fifths"> - <p class="is-size-5 mt-5 mb-5"> + {/* <p class="is-size-5 mt-5 mb-5"> <i18n.Translate> Here you can specify a default value for fields that are not fixed. Default values can be edited by the customer before the payment. </i18n.Translate> - </p> + </p> */} <p></p> - <FormProvider + {/* <FormProvider object={state} valueHandler={setState} errors={errors} > <InputCurrency<Entity> name="amount" - label={ - fixedAmount - ? i18n.str`Fixed amount` - : i18n.str`Default amount` - } - readonly={fixedAmount} + label={i18n.str`Amount`} + readonly tooltip={i18n.str`Amount of the order`} /> <Input<Entity> name="summary" inputType="multiline" - readonly={fixedSummary} - label={ - fixedSummary - ? i18n.str`Fixed summary` - : i18n.str`Default summary` - } + readonly + label={i18n.str`Summary`} tooltip={i18n.str`Title of the order to be shown to the customer`} /> - </FormProvider> + </FormProvider> */} <div class="buttons is-right mt-5"> {onBack && ( @@ -144,12 +133,6 @@ export function QrPage({ contract, id: templateId, onBack }: Props): VNode { <div class="column" /> </div> </section> - <section id="printThis"> - <QR text={payTemplateUri} /> - <pre style={{ textAlign: "center" }}> - <a href={payTemplateUri}>{payTemplateUri}</a> - </pre> - </section> </div> ); } @@ -167,6 +150,6 @@ function saveAsPDF(name: string): void { printWindow.document.body.appendChild(divContents.cloneNode(true)); printWindow.addEventListener("load", () => { printWindow.print(); - printWindow.close(); + // printWindow.close(); }); } diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/index.tsx index 7db7478f7..ed809c7b3 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,62 +19,48 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { - ErrorType, - HttpError, - useTranslationContext, -} from "@gnu-taler/web-util/browser"; -import { Fragment, h, VNode } from "preact"; -import { useState } from "preact/hooks"; +import { HttpStatusCode, TalerError, TalerMerchantApi, 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 { NotificationCard } from "../../../../components/menu/index.js"; -import { MerchantBackend } from "../../../../declaration.js"; import { - useTemplateAPI, - useTemplateDetails, + useTemplateDetails } from "../../../../hooks/templates.js"; -import { Notification } from "../../../../utils/types.js"; +import { NotFoundPageOrAdminCreate } from "../../../notfound/index.js"; import { QrPage } from "./QrPage.js"; -import { HttpStatusCode } from "@gnu-taler/taler-util"; +import { LoginPage } from "../../../login/index.js"; -export type Entity = MerchantBackend.Transfers.TransferInformation; +export type Entity = TalerMerchantApi.TransferInformation; interface Props { onBack?: () => void; - onUnauthorized: () => VNode; - onNotFound: () => VNode; - onLoadError: (e: HttpError<MerchantBackend.ErrorDetail>) => VNode; tid: string; } export default function TemplateQrPage({ tid, onBack, - onLoadError, - onNotFound, - onUnauthorized, }: Props): VNode { const result = useTemplateDetails(tid); - const [notif, setNotif] = useState<Notification | undefined>(undefined); - - if (result.loading) return <Loading />; - if (!result.ok) { - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.NotFound - ) - return onNotFound(); - return onLoadError(result); + if (!result) return <Loading /> + if (result instanceof TalerError) { + return <ErrorLoadingMerchant error={result} /> } + if (result.type === "fail") { + switch(result.case) { + case HttpStatusCode.NotFound: { + return <NotFoundPageOrAdminCreate /> + } + case HttpStatusCode.Unauthorized: { + return <LoginPage /> + } + default: { + assertUnreachable(result) + } + } + } + return ( - <> - <NotificationCard notification={notif} /> - <QrPage contract={result.data.template_contract} id={tid} onBack={onBack} /> - </> + <QrPage contract={result.body.template_contract} id={tid} onBack={onBack} /> ); } diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/update/Update.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/update/Update.stories.tsx index 8d07cb31f..303d17b72 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/templates/update/Update.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/update/Update.stories.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/update/UpdatePage.tsx index b578d4664..32c5637aa 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/templates/update/UpdatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/update/UpdatePage.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 @@ -20,10 +20,16 @@ */ import { + AmountString, Amounts, - MerchantTemplateContractDetails, + Duration, + TalerError, + TalerMerchantApi, + TranslatedString, } from "@gnu-taler/taler-util"; -import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { + useTranslationContext +} from "@gnu-taler/web-util/browser"; import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; import { AsyncButton } from "../../../../components/exception/AsyncButton.js"; @@ -35,102 +41,139 @@ import { Input } from "../../../../components/form/Input.js"; import { InputCurrency } from "../../../../components/form/InputCurrency.js"; import { InputDuration } from "../../../../components/form/InputDuration.js"; import { InputNumber } from "../../../../components/form/InputNumber.js"; -import { InputWithAddon } from "../../../../components/form/InputWithAddon.js"; -import { useBackendContext } from "../../../../context/backend.js"; -import { MerchantBackend, WithId } from "../../../../declaration.js"; -import { undefinedIfEmpty } from "../../../../utils/table.js"; -import { InputTab } from "../../../../components/form/InputTab.js"; - -enum Steps { - BOTH_FIXED, - FIXED_PRICE, - FIXED_SUMMARY, - NON_FIXED, -} +import { InputSelector } from "../../../../components/form/InputSelector.js"; +import { InputToggle } from "../../../../components/form/InputToggle.js"; +import { TextField } from "../../../../components/form/TextField.js"; +import { useSessionContext } from "../../../../context/session.js"; +import { useInstanceOtpDevices } from "../../../../hooks/otp.js"; -type Entity = MerchantBackend.Template.TemplatePatchDetails & WithId; +type Entity = { + description?: string; + otpId?: string | null; + summary?: string; + amount?: string; + minimum_age?: number; + pay_duration?: Duration; + summary_editable?: boolean; + amount_editable?: boolean; + currency_editable?: boolean; +}; interface Props { - onUpdate: (d: Entity) => Promise<void>; + onUpdate: (d: TalerMerchantApi.TemplatePatchDetails) => Promise<void>; onBack?: () => void; - template: Entity; + template: TalerMerchantApi.TemplateDetails & WithId; } export function UpdatePage({ template, onUpdate, onBack }: Props): VNode { const { i18n } = useTranslationContext(); - const { url: backendURL } = useBackendContext() + const { config } = useSessionContext(); + const { state: session } = useSessionContext(); - const intialStep = - template.template_contract?.amount === undefined && template.template_contract?.summary === undefined - ? Steps.NON_FIXED - : template.template_contract?.summary === undefined - ? Steps.FIXED_PRICE - : template.template_contract?.amount === undefined - ? Steps.FIXED_SUMMARY - : Steps.BOTH_FIXED; + const [state, setState] = useState<Partial<Entity>>({ + description: template.template_description, + minimum_age: template.template_contract.minimum_age, + otpId: template.otp_id, + pay_duration: template.template_contract.pay_duration + ? Duration.fromTalerProtocolDuration( + template.template_contract.pay_duration, + ) + : undefined, + summary: + template.editable_defaults?.summary ?? template.template_contract.summary, + amount: + template.editable_defaults?.amount ?? + (template.template_contract.amount as AmountString | undefined), + currency_editable: !!template.editable_defaults?.currency, + summary_editable: template.editable_defaults?.summary !== undefined, + amount_editable: template.editable_defaults?.amount !== undefined, + }); - const [state, setState] = useState<Partial<Entity & { type: Steps }>>({ ...template, type: intialStep }); + function updateState(up: (s: Partial<Entity>) => Partial<Entity>) { + setState((old) => { + const newState = up(old); + if (!newState.amount_editable) { + newState.currency_editable = false; + } + return newState; + }); + } - const parsedPrice = !state.template_contract?.amount - ? undefined - : Amounts.parse(state.template_contract?.amount); + const devices = useInstanceOtpDevices(); + const deviceList = + !devices || devices instanceof TalerError || devices.type === "fail" + ? [] + : devices.body.otp_devices; + const deviceMap = deviceList.reduce( + (prev, cur) => { + prev[cur.otp_device_id] = cur.device_description as TranslatedString; + return prev; + }, + {} as Record<string, TranslatedString>, + ); + + const parsedPrice = !state.amount ? undefined : Amounts.parse(state.amount); const errors: FormErrors<Entity> = { - template_description: !state.template_description - ? i18n.str`should not be empty` - : undefined, - template_contract: !state.template_contract - ? undefined - : undefinedIfEmpty({ - amount: !(state.type === Steps.FIXED_PRICE || state.type === Steps.BOTH_FIXED) - ? undefined - : !state.template_contract?.amount - ? i18n.str`required` - : !parsedPrice - ? i18n.str`not valid` - : Amounts.isZero(parsedPrice) - ? i18n.str`must be greater than 0` - : undefined, - summary: !(state.type === Steps.FIXED_SUMMARY || state.type === Steps.BOTH_FIXED) - ? undefined - : !state.template_contract?.summary - ? i18n.str`required` - : undefined, - minimum_age: - state.template_contract.minimum_age < 0 - ? i18n.str`should be greater that 0` - : undefined, - pay_duration: !state.template_contract.pay_duration - ? i18n.str`can't be empty` - : state.template_contract.pay_duration.d_us === "forever" - ? undefined - : state.template_contract.pay_duration.d_us < 1000 * 1000 // less than one second - ? i18n.str`to short` - : undefined, - } as Partial<MerchantTemplateContractDetails>), + description: !state.description ? i18n.str`should not be empty` : undefined, + amount: !state.amount + ? state.amount_editable ? undefined : i18n.str`required` + : !parsedPrice + ? i18n.str`not valid` + : Amounts.isZero(parsedPrice) + ? state.amount_editable ? undefined : i18n.str`must be greater than 0` + : undefined, + minimum_age: + state.minimum_age && state.minimum_age < 0 + ? i18n.str`should be greater that 0` + : undefined, + pay_duration: !state.pay_duration + ? i18n.str`can't be empty` + : state.pay_duration.d_ms === "forever" + ? undefined + : state.pay_duration.d_ms < 1000 // less than one second + ? i18n.str`to short` + : undefined, }; + const cList = Object.values(config.currencies).map((d) => d.name); + const hasErrors = Object.keys(errors).some( - (k) => (errors as any)[k] !== undefined, + (k) => (errors as Record<string, unknown>)[k] !== undefined, ); + const zero = Amounts.stringify(Amounts.zeroOfCurrency(config.currency)) + const submitForm = () => { if (hasErrors) return Promise.reject(); - if (state.template_contract) { - if (state.type === Steps.NON_FIXED) { - delete state.template_contract.amount; - delete state.template_contract.summary; - } else if (state.type === Steps.FIXED_SUMMARY) { - delete state.template_contract.amount; - } else if (state.type === Steps.FIXED_PRICE) { - delete state.template_contract.summary; - } + const contract_amount = state.amount_editable ? undefined : state.amount as AmountString + const contract_summary = state.summary_editable ? undefined : state.summary + const template_contract: TalerMerchantApi.TemplateContractDetails = { + minimum_age: state.minimum_age!, + pay_duration: Duration.toTalerProtocolDuration(state.pay_duration!), + amount: contract_amount, + summary: contract_summary, + currency: + cList.length > 1 && state.currency_editable + ? undefined + : config.currency, } - delete state.type - return onUpdate(state as any); + return onUpdate({ + template_description: state.description!, + template_contract, + required_currency: contract_amount !== undefined ? undefined : config.currency, + editable_defaults: { + amount: !state.amount_editable ? undefined : (state.amount ?? zero), + summary: !state.summary_editable ? undefined : (state.summary ?? ""), + currency: + cList.length === 1 || !state.currency_editable + ? undefined + : config.currency, + }, + otp_id: state.otpId!, + }); }; - return ( <div> <section class="section"> @@ -140,7 +183,7 @@ export function UpdatePage({ template, onUpdate, onBack }: Props): VNode { <div class="level-left"> <div class="level-item"> <span class="is-size-4"> - {backendURL}/templates/{template.id} + {new URL(`templates/${template.id}`, session.backendUrl.href).href} </span> </div> </div> @@ -154,77 +197,91 @@ export function UpdatePage({ template, onUpdate, onBack }: Props): VNode { <div class="column is-four-fifths"> <FormProvider object={state} - valueHandler={setState} + valueHandler={updateState} errors={errors} > - <InputWithAddon<Entity> - name="id" - addonBefore={`templates/`} - readonly - label={i18n.str`Identifier`} - tooltip={i18n.str`Name of the template in URLs.`} - /> - <Input<Entity> - name="template_description" + name="description" label={i18n.str`Description`} help="" tooltip={i18n.str`Describe what this template stands for`} /> - <InputTab - name="type" - label={i18n.str`Type`} - help={(() => { - switch (state.type) { - case Steps.NON_FIXED: return i18n.str`User will be able to input price and summary before payment.` - case Steps.FIXED_PRICE: return i18n.str`User will be able to add a summary before payment.` - case Steps.FIXED_SUMMARY: return i18n.str`User will be able to set the price before payment.` - case Steps.BOTH_FIXED: return i18n.str`User will not be able to change the price or the summary.` - } - })()} - tooltip={i18n.str`Define what the user be allowed to modify`} - values={[ - Steps.NON_FIXED, - Steps.FIXED_PRICE, - Steps.FIXED_SUMMARY, - Steps.BOTH_FIXED, - ]} - toStr={(v: Steps): string => { - switch (v) { - case Steps.NON_FIXED: return i18n.str`Simple` - case Steps.FIXED_PRICE: return i18n.str`With price` - case Steps.FIXED_SUMMARY: return i18n.str`With summary` - case Steps.BOTH_FIXED: return i18n.str`With price and summary` - } - }} + <Input<Entity> + name="summary" + inputType="multiline" + label={i18n.str`Summary`} + tooltip={i18n.str`If specified, this template will create order with the same summary`} /> - {state.type === Steps.BOTH_FIXED || state.type === Steps.FIXED_SUMMARY ? - <Input - name="template_contract.summary" - inputType="multiline" - label={i18n.str`Fixed summary`} - tooltip={i18n.str`If specified, this template will create order with the same summary`} - /> - : undefined} - {state.type === Steps.BOTH_FIXED || state.type === Steps.FIXED_PRICE ? - <InputCurrency - name="template_contract.amount" - label={i18n.str`Fixed price`} - tooltip={i18n.str`If specified, this template will create order with the same price`} - /> - : undefined} - <InputNumber - name="template_contract.minimum_age" + <InputToggle<Entity> + name="summary_editable" + label={i18n.str`Summary is editable`} + tooltip={i18n.str`Allow the user to change the summary.`} + /> + <InputCurrency<Entity> + name="amount" + label={i18n.str`Amount`} + tooltip={i18n.str`If specified, this template will create order with the same price`} + /> + <InputToggle<Entity> + name="amount_editable" + label={i18n.str`Amount is editable`} + tooltip={i18n.str`Allow the user to select the amount to pay.`} + /> + {cList.length > 1 && ( + <Fragment> + <InputToggle<Entity> + name="currency_editable" + readonly={!state.amount_editable} + label={i18n.str`Currency is editable`} + tooltip={i18n.str`Allow the user to change currency.`} + /> + <TextField name="sc" label={i18n.str`Supported currencies`}> + <i18n.Translate> + supported currencies: {cList.join(", ")} + </i18n.Translate> + </TextField> + </Fragment> + )} + <InputNumber<Entity> + name="minimum_age" label={i18n.str`Minimum age`} help="" tooltip={i18n.str`Is this contract restricted to some age?`} /> - <InputDuration - name="template_contract.pay_duration" + <InputDuration<Entity> + name="pay_duration" label={i18n.str`Payment timeout`} help="" tooltip={i18n.str`How much time has the customer to complete the payment once the order was created.`} /> + {!deviceList.length ? ( + <TextField + name="otpId" + label={i18n.str`OTP device`} + tooltip={i18n.str`Use to verify transaction while offline.`} + > + <i18n.Translate>No OTP device.</i18n.Translate> + <a href="/otp-devices/new"> + <i18n.Translate>Add one first</i18n.Translate> + </a> + </TextField> + ) : ( + <InputSelector<Entity> + name="otpId" + label={i18n.str`OTP device`} + values={[ + undefined, + ...deviceList.map((e) => e.otp_device_id), + ]} + toStr={(v?: string) => { + if (!v) { + return i18n.str`No device`; + } + return deviceMap[v]; + }} + tooltip={i18n.str`Use to verify transaction in offline mode.`} + /> + )} </FormProvider> <div class="buttons is-right mt-5"> diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/update/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/update/index.tsx index 3adca45db..6185bd2a9 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/templates/update/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/update/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,71 +19,69 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { HttpStatusCode, TalerError, TalerMerchantApi, assertUnreachable } from "@gnu-taler/taler-util"; import { - ErrorType, - HttpError, - useTranslationContext, + useTranslationContext } from "@gnu-taler/web-util/browser"; -import { Fragment, h, VNode } from "preact"; +import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; +import { ErrorLoadingMerchant } from "../../../../components/ErrorLoadingMerchant.js"; import { Loading } from "../../../../components/exception/loading.js"; import { NotificationCard } from "../../../../components/menu/index.js"; -import { MerchantBackend, WithId } from "../../../../declaration.js"; +import { useSessionContext } from "../../../../context/session.js"; import { - useTemplateAPI, useTemplateDetails, } from "../../../../hooks/templates.js"; import { Notification } from "../../../../utils/types.js"; +import { LoginPage } from "../../../login/index.js"; +import { NotFoundPageOrAdminCreate } from "../../../notfound/index.js"; import { UpdatePage } from "./UpdatePage.js"; -import { HttpStatusCode } from "@gnu-taler/taler-util"; -export type Entity = MerchantBackend.Template.TemplatePatchDetails & WithId; +export type Entity = TalerMerchantApi.TemplatePatchDetails & WithId; interface Props { onBack?: () => void; onConfirm: () => void; - onUnauthorized: () => VNode; - onNotFound: () => VNode; - onLoadError: (e: HttpError<MerchantBackend.ErrorDetail>) => VNode; tid: string; } export default function UpdateTemplate({ tid, onConfirm, onBack, - onUnauthorized, - onNotFound, - onLoadError, }: Props): VNode { - const { updateTemplate } = useTemplateAPI(); + const { lib } = useSessionContext(); + const { state } = useSessionContext(); const result = useTemplateDetails(tid); const [notif, setNotif] = useState<Notification | undefined>(undefined); const { i18n } = useTranslationContext(); - if (result.loading) return <Loading />; - if (!result.ok) { - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.NotFound - ) - return onNotFound(); - return onLoadError(result); + if (!result) return <Loading /> + if (result instanceof TalerError) { + return <ErrorLoadingMerchant error={result} /> + } + if (result.type === "fail") { + switch(result.case) { + case HttpStatusCode.NotFound: { + return <NotFoundPageOrAdminCreate /> + } + case HttpStatusCode.Unauthorized: { + return <LoginPage /> + } + default: { + assertUnreachable(result) + } + } } return ( <Fragment> <NotificationCard notification={notif} /> <UpdatePage - template={{ ...result.data, id: tid }} + template={{...result.body, id: tid}} onBack={onBack} onUpdate={(data) => { - return updateTemplate(tid, data) + return lib.instance.updateTemplate(state.token, tid, data) .then(onConfirm) .catch((error) => { setNotif({ diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/use/Use.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/use/Use.stories.tsx index 13576d94d..d91888b97 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/templates/use/Use.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/use/Use.stories.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/use/UsePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/use/UsePage.tsx index 983804d3e..5b1404b55 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/templates/use/UsePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/use/UsePage.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,8 +19,9 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { AmountString, TalerMerchantApi } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { h, VNode } from "preact"; +import { VNode, h } from "preact"; import { useState } from "preact/hooks"; import { AsyncButton } from "../../../../components/exception/AsyncButton.js"; import { @@ -29,13 +30,12 @@ import { } from "../../../../components/form/FormProvider.js"; import { Input } from "../../../../components/form/Input.js"; import { InputCurrency } from "../../../../components/form/InputCurrency.js"; -import { MerchantBackend } from "../../../../declaration.js"; -type Entity = MerchantBackend.Template.UsingTemplateDetails; +type Entity = TalerMerchantApi.TemplateContractDetails; interface Props { id: string; - template: MerchantBackend.Template.TemplateDetails; + template: TalerMerchantApi.TemplateDetails; onCreateOrder: (d: Entity) => Promise<void>; onBack?: () => void; } @@ -44,19 +44,19 @@ export function UsePage({ id, template, onCreateOrder, onBack }: Props): VNode { const { i18n } = useTranslationContext(); const [state, setState] = useState<Partial<Entity>>({ - amount: template.template_contract.amount, - summary: template.template_contract.summary, + currency: + template.editable_defaults?.currency ?? + template.template_contract.currency, + // FIXME: Add additional check here, editable default might be a plain string! + amount: (template.editable_defaults?.amount ?? + template.template_contract.amount) as AmountString, + summary: + template.editable_defaults?.summary ?? template.template_contract.summary, }); const errors: FormErrors<Entity> = { - amount: - !template.template_contract.amount && !state.amount - ? i18n.str`Amount is required` - : undefined, - summary: - !template.template_contract.summary && !state.summary - ? i18n.str`Order summary is required` - : undefined, + amount: !state.amount ? i18n.str`Amount is required` : undefined, + summary: !state.summary ? i18n.str`Order summary is required` : undefined, }; const hasErrors = Object.keys(errors).some( diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/use/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/use/index.tsx index ed1242ef5..00cb2b827 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/templates/use/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/templates/use/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,31 +19,28 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { HttpStatusCode, TalerError, TalerMerchantApi, assertUnreachable } from "@gnu-taler/taler-util"; import { - ErrorType, - HttpError, - useTranslationContext, + useTranslationContext } from "@gnu-taler/web-util/browser"; -import { Fragment, h, VNode } from "preact"; +import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; +import { ErrorLoadingMerchant } from "../../../../components/ErrorLoadingMerchant.js"; import { Loading } from "../../../../components/exception/loading.js"; import { NotificationCard } from "../../../../components/menu/index.js"; -import { MerchantBackend } from "../../../../declaration.js"; import { - useTemplateAPI, - useTemplateDetails, + useTemplateDetails } from "../../../../hooks/templates.js"; import { Notification } from "../../../../utils/types.js"; +import { LoginPage } from "../../../login/index.js"; +import { NotFoundPageOrAdminCreate } from "../../../notfound/index.js"; import { UsePage } from "./UsePage.js"; -import { HttpStatusCode } from "@gnu-taler/taler-util"; +import { useSessionContext } from "../../../../context/session.js"; -export type Entity = MerchantBackend.Transfers.TransferInformation; +export type Entity = TalerMerchantApi.TransferInformation; interface Props { onBack?: () => void; onOrderCreated: (id: string) => void; - onUnauthorized: () => VNode; - onNotFound: () => VNode; - onLoadError: (e: HttpError<MerchantBackend.ErrorDetail>) => VNode; tid: string; } @@ -51,42 +48,52 @@ export default function TemplateUsePage({ tid, onOrderCreated, onBack, - onLoadError, - onNotFound, - onUnauthorized, }: Props): VNode { - const { createOrderFromTemplate } = useTemplateAPI(); + const { lib } = useSessionContext(); const result = useTemplateDetails(tid); const [notif, setNotif] = useState<Notification | undefined>(undefined); const { i18n } = useTranslationContext(); - if (result.loading) return <Loading />; - if (!result.ok) { - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.NotFound - ) - return onNotFound(); - return onLoadError(result); + if (!result) return <Loading /> + if (result instanceof TalerError) { + return <ErrorLoadingMerchant error={result} /> + } + if (result.type === "fail") { + switch(result.case) { + case HttpStatusCode.NotFound: { + return <NotFoundPageOrAdminCreate /> + } + case HttpStatusCode.Unauthorized: { + return <LoginPage /> + } + default: { + assertUnreachable(result) + } + } } return ( <> <NotificationCard notification={notif} /> <UsePage - template={result.data} + template={result.body} id={tid} onBack={onBack} onCreateOrder={( - request: MerchantBackend.Template.UsingTemplateDetails, + request: TalerMerchantApi.UsingTemplateDetails, ) => { - return createOrderFromTemplate(tid, request) - .then((res) => onOrderCreated(res.data.order_id)) + + return lib.instance.useTemplateCreateOrder(tid, request) + .then((res) => { + if (res.type === "ok") { + onOrderCreated(res.body.order_id) + } else { + setNotif({ + message: i18n.str`could not create order from template`, + type: "ERROR", + }); + } + }) .catch((error) => { setNotif({ message: i18n.str`could not create order from template`, diff --git a/packages/merchant-backoffice-ui/src/paths/instance/token/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/token/DetailPage.tsx index d22a9e4d4..d718ffb69 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/token/DetailPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/token/DetailPage.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 @@ -25,19 +25,23 @@ import { useState } from "preact/hooks"; import { AsyncButton } from "../../../components/exception/AsyncButton.js"; import { FormProvider } from "../../../components/form/FormProvider.js"; import { Input } from "../../../components/form/Input.js"; -import { useInstanceContext } from "../../../context/instance.js"; -import { AccessToken } from "../../../declaration.js"; import { NotificationCard } from "../../../components/menu/index.js"; +import { useSessionContext } from "../../../context/session.js"; +import { AccessToken, createRFC8959AccessTokenPlain } from "@gnu-taler/taler-util"; interface Props { - instanceId: string; hasToken: boolean | undefined; onClearToken: (c: AccessToken | undefined) => void; onNewToken: (c: AccessToken | undefined, s: AccessToken) => void; onBack?: () => void; } -export function DetailPage({ instanceId, hasToken, onBack, onNewToken, onClearToken }: Props): VNode { +export function DetailPage({ + hasToken, + onBack, + onNewToken, + onClearToken, +}: Props): VNode { type State = { old_token: string; new_token: string; repeat_token: string }; const [form, setValue] = useState<Partial<State>>({ old_token: "", @@ -47,9 +51,10 @@ export function DetailPage({ instanceId, hasToken, onBack, onNewToken, onClearTo const { i18n } = useTranslationContext(); const errors = { - old_token: hasToken && !form.old_token - ? i18n.str`you need your access token to perform the operation` - : undefined, + old_token: + hasToken && !form.old_token + ? i18n.str`you need your access token to perform the operation` + : undefined, new_token: !form.new_token ? i18n.str`cannot be empty` : form.new_token === form.old_token @@ -62,18 +67,21 @@ export function DetailPage({ instanceId, hasToken, onBack, onNewToken, onClearTo }; const hasErrors = Object.keys(errors).some( - (k) => (errors as any)[k] !== undefined, + (k) => (errors as Record<string, unknown>)[k] !== undefined, ); - const instance = useInstanceContext(); + const { state } = useSessionContext(); - const text = i18n.str`You are updating the access token from instance with id "${instance.id}"`; + const text = i18n.str`You are updating the access token from instance with id "${state.instance}"`; async function submitForm() { if (hasErrors) return; - const ot = hasToken ? `secret-token:${form.old_token}` as AccessToken : undefined; - const nt = `secret-token:${form.new_token}` as AccessToken; - onNewToken(ot, nt) + const oldToken = + form.old_token !== undefined && hasToken + ? createRFC8959AccessTokenPlain(form.old_token) + : undefined; + const newToken = createRFC8959AccessTokenPlain(form.new_token!); + onNewToken(oldToken, newToken); } return ( @@ -84,17 +92,15 @@ export function DetailPage({ instanceId, hasToken, onBack, onNewToken, onClearTo <div class="level"> <div class="level-left"> <div class="level-item"> - <span class="is-size-4"> - {text} - </span> + <span class="is-size-4">{text}</span> </div> </div> </div> </div> </section> <hr /> - - {!hasToken && + + {!hasToken && ( <NotificationCard notification={{ message: i18n.str`This instance doesn't have authentication token.`, @@ -102,7 +108,7 @@ export function DetailPage({ instanceId, hasToken, onBack, onNewToken, onClearTo type: "WARN", }} /> - } + )} <div class="columns"> <div class="column" /> @@ -119,7 +125,8 @@ export function DetailPage({ instanceId, hasToken, onBack, onNewToken, onClearTo /> <p> <i18n.Translate> - Clearing the access token will mean public access to the instance. + Clearing the access token will mean public access to the + instance. </i18n.Translate> </p> <div class="buttons is-right mt-5"> @@ -127,10 +134,9 @@ export function DetailPage({ instanceId, hasToken, onBack, onNewToken, onClearTo class="button" onClick={() => { if (hasToken) { - const ot = `secret-token:${form.old_token}` as AccessToken; - onClearToken(ot) + onClearToken(form.old_token ? createRFC8959AccessTokenPlain(form.old_token) : undefined); } else { - onClearToken(undefined) + onClearToken(undefined); } }} > @@ -140,7 +146,6 @@ export function DetailPage({ instanceId, hasToken, onBack, onNewToken, onClearTo </Fragment> )} - <Input<State> name="new_token" label={i18n.str`New access token`} @@ -154,29 +159,29 @@ export function DetailPage({ instanceId, hasToken, onBack, onNewToken, onClearTo inputType="password" /> </Fragment> + <div class="buttons is-right mt-5"> + {onBack && ( + <a class="button" onClick={onBack}> + <i18n.Translate>Cancel</i18n.Translate> + </a> + )} + <AsyncButton + type="submit" + disabled={hasErrors} + data-tooltip={ + hasErrors + ? i18n.str`Need to complete marked fields` + : "confirm operation" + } + onClick={submitForm} + > + <i18n.Translate>Confirm change</i18n.Translate> + </AsyncButton> + </div> </FormProvider> - <div class="buttons is-right mt-5"> - {onBack && ( - <button class="button" onClick={onBack}> - <i18n.Translate>Cancel</i18n.Translate> - </button> - )} - <AsyncButton - disabled={hasErrors} - data-tooltip={ - hasErrors - ? i18n.str`Need to complete marked fields` - : "confirm operation" - } - onClick={submitForm} - > - <i18n.Translate>Confirm change</i18n.Translate> - </AsyncButton> - </div> </div> <div class="column" /> </div> - </section> </div> ); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/token/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/token/index.tsx index 22365c9e1..c23e5be17 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/token/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/token/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 @@ -13,72 +13,84 @@ 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/> */ -import { HttpStatusCode } from "@gnu-taler/taler-util"; -import { ErrorType, HttpError, useTranslationContext } from "@gnu-taler/web-util/browser"; +import { + HttpStatusCode, + TalerError, + assertUnreachable, +} from "@gnu-taler/taler-util"; +import { + useTranslationContext +} from "@gnu-taler/web-util/browser"; import { Fragment, VNode, h } from "preact"; -import { Loading } from "../../../components/exception/loading.js"; -import { AccessToken, MerchantBackend } from "../../../declaration.js"; -import { useInstanceAPI, useInstanceDetails } from "../../../hooks/instance.js"; -import { DetailPage } from "./DetailPage.js"; -import { useInstanceContext } from "../../../context/instance.js"; import { useState } from "preact/hooks"; +import { ErrorLoadingMerchant } from "../../../components/ErrorLoadingMerchant.js"; +import { Loading } from "../../../components/exception/loading.js"; import { NotificationCard } from "../../../components/menu/index.js"; +import { useSessionContext } from "../../../context/session.js"; +import { useInstanceDetails } from "../../../hooks/instance.js"; import { Notification } from "../../../utils/types.js"; -import { useBackendContext } from "../../../context/backend.js"; +import { LoginPage } from "../../login/index.js"; +import { NotFoundPageOrAdminCreate } from "../../notfound/index.js"; +import { DetailPage } from "./DetailPage.js"; interface Props { - onUnauthorized: () => VNode; - onLoadError: (error: HttpError<MerchantBackend.ErrorDetail>) => VNode; onChange: () => void; - onNotFound: () => VNode; onCancel: () => void; } -export default function Token({ - onLoadError, - onChange, - onUnauthorized, - onNotFound, - onCancel, -}: Props): VNode { +export default function Token({ onChange, onCancel }: Props): VNode { const { i18n } = useTranslationContext(); - + const { lib } = useSessionContext(); + const { logIn } = useSessionContext(); const [notif, setNotif] = useState<Notification | undefined>(undefined); - const { clearAccessToken, setNewAccessToken } = useInstanceAPI(); - const { id } = useInstanceContext(); - const result = useInstanceDetails() + const result = useInstanceDetails(); - if (result.loading) return <Loading />; - if (!result.ok) { - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.NotFound - ) - return onNotFound(); - return onLoadError(result); + 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); + } + } } - const hasToken = result.data.auth.method === "token" + const hasToken = result.body.auth.method === "token"; return ( <Fragment> <NotificationCard notification={notif} /> <DetailPage - instanceId={id} onBack={onCancel} hasToken={hasToken} onClearToken={async (currentToken): Promise<void> => { try { - await clearAccessToken(currentToken); - onChange(); + const resp = await lib.instance.updateCurrentInstanceAuthentication( + currentToken, + { + method: "external", + }, + ); + if (resp.type === "ok") { + onChange(); + } else { + return setNotif({ + message: i18n.str`Failed to clear token`, + type: "ERROR", + description: resp.detail.hint, + }); + } } catch (error) { if (error instanceof Error) { - setNotif({ + return setNotif({ message: i18n.str`Failed to clear token`, type: "ERROR", description: error.message, @@ -88,11 +100,45 @@ export default function Token({ }} onNewToken={async (currentToken, newToken): Promise<void> => { try { - await setNewAccessToken(currentToken, newToken); - onChange(); + { + const resp = + await lib.instance.updateCurrentInstanceAuthentication( + currentToken, + { + token: newToken, + method: "token", + }, + ); + if (resp.type === "fail") { + return setNotif({ + message: i18n.str`Failed to set new token`, + type: "ERROR", + description: resp.detail.hint, + }); + } + } + const resp = await lib.authenticate.createAccessTokenBearer( + newToken, + { + scope: "write", + duration: { + d_us: "forever", + }, + refreshable: true, + }, + ); + if (resp.type === "ok") { + logIn(resp.body.token); + return onChange(); + } else { + return setNotif({ + message: i18n.str`Failed to set new token`, + type: "ERROR", + }); + } } catch (error) { if (error instanceof Error) { - setNotif({ + return setNotif({ message: i18n.str`Failed to set new token`, type: "ERROR", description: error.message, diff --git a/packages/merchant-backoffice-ui/src/paths/instance/token/stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/token/stories.tsx index 5f0f56f2d..581828657 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/token/stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/token/stories.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 diff --git a/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/create/CreatePage.tsx index 7ae9bebe6..cec1f3426 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/create/CreatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/create/CreatePage.tsx @@ -22,12 +22,11 @@ import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { h, VNode } from "preact"; import { AsyncButton } from "../../../../components/exception/AsyncButton.js"; -import { MerchantBackend } from "../../../../declaration.js"; import { useListener } from "../../../../hooks/listener.js"; import { TokenFamilyForm } from "../../../../components/tokenfamily/TokenFamilyForm.js"; -// import { Test } from "../../../../components/tokenfamily/Test.js"; +import { TalerMerchantApi } from "@gnu-taler/taler-util"; -type Entity = MerchantBackend.TokenFamilies.TokenFamilyAddDetail; +type Entity = TalerMerchantApi.TokenFamilyCreateRequest; interface Props { onCreate: (d: Entity) => Promise<void>; diff --git a/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/create/index.tsx index 0beef4c45..deee7d0d5 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/create/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/create/index.tsx @@ -25,8 +25,8 @@ import { useState } from "preact/hooks"; import { NotificationCard } from "../../../../components/menu/index.js"; import { MerchantBackend } from "../../../../declaration.js"; import { Notification } from "../../../../utils/types.js"; +import { useSessionContext } from "../../../../context/session.js"; import { CreatePage } from "./CreatePage.js"; -import { useTokenFamilyAPI } from "../../../../hooks/tokenfamily.js"; export type Entity = MerchantBackend.TokenFamilies.TokenFamilyAddDetail; interface Props { @@ -34,9 +34,10 @@ interface Props { onConfirm: () => void; } export default function CreateTokenFamily({ onConfirm, onBack }: Props): VNode { - const { createTokenFamily } = useTokenFamilyAPI(); const [notif, setNotif] = useState<Notification | undefined>(undefined); const { i18n } = useTranslationContext(); + const { lib } = useSessionContext(); + const { state } = useSessionContext(); return ( <Fragment> @@ -44,7 +45,7 @@ export default function CreateTokenFamily({ onConfirm, onBack }: Props): VNode { <CreatePage onBack={onBack} onCreate={(request) => { - return createTokenFamily(request) + return lib.instance.createTokenFamily(state.token, request) .then(() => onConfirm()) .catch((error) => { setNotif({ diff --git a/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/list/Table.tsx index 3d9bf9018..b5ca03cfd 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/list/Table.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/list/Table.tsx @@ -24,8 +24,9 @@ import { Fragment, h, VNode } from "preact"; import { StateUpdater, useState } from "preact/hooks"; import { format } from "date-fns"; import { MerchantBackend } from "../../../../declaration.js"; +import { TalerMerchantApi } from "@gnu-taler/taler-util"; -type Entity = MerchantBackend.TokenFamilies.TokenFamilyEntry; +type Entity = TalerMerchantApi.TokenFamilySummary; interface Props { instances: Entity[]; diff --git a/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/list/index.tsx index a5d7413c0..5531174e0 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/list/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/list/index.tsx @@ -31,11 +31,15 @@ import { NotificationCard } from "../../../../components/menu/index.js"; import { MerchantBackend } from "../../../../declaration.js"; import { useInstanceTokenFamilies, - useTokenFamilyAPI, } from "../../../../hooks/tokenfamily.js"; import { Notification } from "../../../../utils/types.js"; import { CardTable } from "./Table.js"; -import { HttpStatusCode } from "@gnu-taler/taler-util"; +import { HttpStatusCode, TalerError, TalerMerchantApi, assertUnreachable } from "@gnu-taler/taler-util"; +import { useSessionContext } from "../../../../context/session.js"; +import { ErrorLoadingMerchant } from "../../../../components/ErrorLoadingMerchant.js"; +import { ConfirmModal } from "../../../../components/modal/index.js"; +import { LoginPage } from "../../../login/index.js"; +import { NotFoundPageOrAdminCreate } from "../../../notfound/index.js"; interface Props { onUnauthorized: () => VNode; @@ -52,24 +56,29 @@ export default function TokenFamilyList({ onNotFound, }: Props): VNode { const result = useInstanceTokenFamilies(); - const { deleteTokenFamily, updateTokenFamily } = useTokenFamilyAPI(); const [notif, setNotif] = useState<Notification | undefined>(undefined); + const { lib, state } = useSessionContext(); + const [deleting, setDeleting] = + useState<TalerMerchantApi.TokenFamilySummary | null>(null); const { i18n } = useTranslationContext(); - if (result.loading) return <Loading />; - if (!result.ok) { - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.NotFound - ) - return onNotFound(); - return onLoadError(result); + if (!result) return <Loading />; + if (result instanceof TalerError) { + return <ErrorLoadingMerchant error={result} />; + } + if (result.type === "fail") { + switch (result.case) { + case HttpStatusCode.NotFound: { + return <NotFoundPageOrAdminCreate />; + } + case HttpStatusCode.Unauthorized: { + return <LoginPage /> + } + default: { + assertUnreachable(result); + } + } } return ( @@ -77,42 +86,61 @@ export default function TokenFamilyList({ <NotificationCard notification={notif} /> <CardTable - instances={result.data} + instances={result.body.token_families} onCreate={onCreate} - onUpdate={(slug, fam) => - updateTokenFamily(slug, fam) - .then(() => - setNotif({ - message: i18n.str`token family updated successfully`, - type: "SUCCESS", - }), - ) - .catch((error) => - setNotif({ - message: i18n.str`could not update the token family`, - type: "ERROR", - description: error.message, - }), - ) - } + onUpdate={async (slug, fam) => { + try { + await lib.instance.updateTokenFamily(state.token, slug, fam); + setNotif({ + message: i18n.str`token family updated successfully`, + type: "SUCCESS", + }); + } catch (error) { + setNotif({ + message: i18n.str`could not update the token family`, + type: "ERROR", + description: error instanceof Error ? error.message : undefined, + }); + } + return; + }} onSelect={(tokenFamily) => onSelect(tokenFamily.slug)} - onDelete={(fam) => - deleteTokenFamily(fam.slug) - .then(() => + onDelete={(fam) => setDeleting(fam)} + /> + + {deleting && ( + <ConfirmModal + label={`Delete token family`} + description={`Delete the token family "${deleting.name}"`} + danger + active + onCancel={() => setDeleting(null)} + onConfirm={async (): Promise<void> => { + try { + await lib.instance.deleteTokenFamily(state.token, deleting.slug); setNotif({ - message: i18n.str`token family delete successfully`, + message: i18n.str`Token family "${deleting.name}" (SLUG: ${deleting.slug}) has been deleted`, type: "SUCCESS", - }), - ) - .catch((error) => + }); + } catch (error) { setNotif({ - message: i18n.str`could not delete the token family`, + message: i18n.str`Failed to delete token family`, type: "ERROR", - description: error.message, - }), - ) - } - /> + description: error instanceof Error ? error.message : undefined, + }); + } + setDeleting(null); + }} + > + <p> + If you delete the <b>"{deleting.name}"</b> token family (Slug:{" "} + <b>{deleting.slug}</b>), all issued tokens will become invalid. + </p> + <p class="warning"> + Deleting a token family <b>cannot be undone</b>. + </p> + </ConfirmModal> + )} </section> ); } diff --git a/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/update/UpdatePage.tsx index 3735645bd..7ad18c01b 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/update/UpdatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/update/UpdatePage.tsx @@ -25,14 +25,14 @@ import { useState } from "preact/hooks"; import * as yup from "yup"; import { MerchantBackend, WithId } from "../../../../declaration.js"; import { TokenFamilyUpdateSchema } from "../../../../schemas/index.js"; -import { useBackendContext } from "../../../../context/backend.js"; import { FormErrors, FormProvider } from "../../../../components/form/FormProvider.js"; import { Input } from "../../../../components/form/Input.js"; import { InputDate } from "../../../../components/form/InputDate.js"; import { InputDuration } from "../../../../components/form/InputDuration.js"; import { AsyncButton } from "../../../../components/exception/AsyncButton.js"; +import { TalerMerchantApi } from "@gnu-taler/taler-util"; -type Entity = MerchantBackend.TokenFamilies.TokenFamilyPatchDetail & WithId; +type Entity = TalerMerchantApi.TokenFamilyUpdateRequest; interface Props { onUpdate: (d: Entity) => Promise<void>; @@ -71,7 +71,6 @@ export function UpdatePage({ onUpdate, onBack, tokenFamily }: Props) { } const { i18n } = useTranslationContext(); - const { url: backendURL } = useBackendContext() return ( <div> @@ -82,7 +81,7 @@ export function UpdatePage({ onUpdate, onBack, tokenFamily }: Props) { <div class="level-left"> <div class="level-item"> <span class="is-size-4"> - {backendURL}/tokenfamilies/{tokenFamily.id} + Token Family: <b>{tokenFamily.name}</b> </span> </div> </div> diff --git a/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/update/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/update/index.tsx index 4f582d7f3..068235e14 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/update/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/update/index.tsx @@ -28,59 +28,58 @@ import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { Loading } from "../../../../components/exception/loading.js"; import { NotificationCard } from "../../../../components/menu/index.js"; -import { MerchantBackend, WithId } from "../../../../declaration.js"; import { Notification } from "../../../../utils/types.js"; import { UpdatePage } from "./UpdatePage.js"; -import { HttpStatusCode } from "@gnu-taler/taler-util"; -import { useTokenFamilyAPI, useTokenFamilyDetails } from "../../../../hooks/tokenfamily.js"; +import { HttpStatusCode, TalerError, TalerMerchantApi, assertUnreachable } from "@gnu-taler/taler-util"; +import { useTokenFamilyDetails } from "../../../../hooks/tokenfamily.js"; +import { useSessionContext } from "../../../../context/session.js"; +import { ErrorLoadingMerchant } from "../../../../components/ErrorLoadingMerchant.js"; +import { LoginPage } from "../../../login/index.js"; +import { NotFoundPageOrAdminCreate } from "../../../notfound/index.js"; -export type Entity = MerchantBackend.TokenFamilies.TokenFamilyPatchDetail & WithId; +type Entity = TalerMerchantApi.TokenFamilyUpdateRequest; interface Props { onBack?: () => void; onConfirm: () => void; - onUnauthorized: () => VNode; - onNotFound: () => VNode; - onLoadError: (e: HttpError<MerchantBackend.ErrorDetail>) => VNode; slug: string; } export default function UpdateTokenFamily({ slug, onConfirm, onBack, - onUnauthorized, - onNotFound, - onLoadError, }: Props): VNode { - const { updateTokenFamily } = useTokenFamilyAPI(); const result = useTokenFamilyDetails(slug); const [notif, setNotif] = useState<Notification | undefined>(undefined); + const { lib, state } = useSessionContext(); const { i18n } = useTranslationContext(); - if (result.loading) return <Loading />; - if (!result.ok) { - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.NotFound - ) - return onNotFound(); - return onLoadError(result); + if (!result) return <Loading />; + if (result instanceof TalerError) { + return <ErrorLoadingMerchant error={result} />; + } + if (result.type === "fail") { + switch (result.case) { + case HttpStatusCode.NotFound: { + return <NotFoundPageOrAdminCreate />; + } + case HttpStatusCode.Unauthorized: { + return <LoginPage /> + } + default: { + assertUnreachable(result); + } + } } const family: Entity = { - id: slug, - name: result.data.name, - description: result.data.description, - description_i18n: result.data.description_i18n || {}, - duration: result.data.duration, - valid_after: result.data.valid_after, - valid_before: result.data.valid_before, + name: result.body.name, + description: result.body.description, + description_i18n: result.body.description_i18n || {}, + duration: result.body.duration, + valid_after: result.body.valid_after, + valid_before: result.body.valid_before, }; return ( @@ -90,7 +89,7 @@ export default function UpdateTokenFamily({ tokenFamily={family} onBack={onBack} onUpdate={(data) => { - return updateTokenFamily(slug, data) + return lib.instance.updateTokenFamily(state.token, slug, data) .then(onConfirm) .catch((error) => { setNotif({ diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/Create.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/Create.stories.tsx index 64b67335c..ca38defc3 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/Create.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/Create.stories.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/CreatePage.tsx index 13f5f3c12..91aabe58e 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/CreatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/CreatePage.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,8 +19,9 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { AmountString, TalerMerchantApi } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { h, VNode } from "preact"; +import { VNode, h } from "preact"; import { useState } from "preact/hooks"; import { AsyncButton } from "../../../../components/exception/AsyncButton.js"; import { @@ -30,14 +31,12 @@ import { import { Input } from "../../../../components/form/Input.js"; import { InputCurrency } from "../../../../components/form/InputCurrency.js"; import { InputSelector } from "../../../../components/form/InputSelector.js"; -import { useConfigContext } from "../../../../context/config.js"; -import { MerchantBackend } from "../../../../declaration.js"; import { CROCKFORD_BASE32_REGEX, URL_REGEX, } from "../../../../utils/constants.js"; -type Entity = MerchantBackend.Transfers.TransferInformation; +type Entity = TalerMerchantApi.TransferInformation; interface Props { onCreate: (d: Entity) => Promise<void>; @@ -47,13 +46,12 @@ interface Props { export function CreatePage({ accounts, onCreate, onBack }: Props): VNode { const { i18n } = useTranslationContext(); - const { currency } = useConfigContext(); const [state, setState] = useState<Partial<Entity>>({ wtid: "", // payto_uri: , // exchange_url: 'http://exchange.taler:8081/', - credit_amount: ``, + credit_amount: `` as AmountString, }); const errors: FormErrors<Entity> = { diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/index.tsx index 25551a031..428476337 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,31 +19,34 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { Fragment, h, VNode } from "preact"; +import { TalerError, TalerMerchantApi } from "@gnu-taler/taler-util"; +import { + useTranslationContext +} from "@gnu-taler/web-util/browser"; +import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; import { NotificationCard } from "../../../../components/menu/index.js"; -import { MerchantBackend } from "../../../../declaration.js"; -import { useInstanceDetails } from "../../../../hooks/instance.js"; -import { useTransferAPI } from "../../../../hooks/transfer.js"; +import { useSessionContext } from "../../../../context/session.js"; +import { useInstanceBankAccounts } from "../../../../hooks/bank.js"; import { Notification } from "../../../../utils/types.js"; import { CreatePage } from "./CreatePage.js"; -import { useBankAccountDetails, useInstanceBankAccounts } from "../../../../hooks/bank.js"; -export type Entity = MerchantBackend.Transfers.TransferInformation; +export type Entity = TalerMerchantApi.TransferInformation; interface Props { onBack?: () => void; onConfirm: () => void; } export default function CreateTransfer({ onConfirm, onBack }: Props): VNode { - const { informTransfer } = useTransferAPI(); + const { lib } = useSessionContext(); + const { state } = useSessionContext(); const [notif, setNotif] = useState<Notification | undefined>(undefined); const { i18n } = useTranslationContext(); const instance = useInstanceBankAccounts(); - const accounts = !instance.ok - ? [] - : instance.data.accounts.map((a) => a.payto_uri); + const accounts = + !instance || instance instanceof TalerError || instance.type === "fail" + ? [] + : instance.body.accounts.map((a) => a.payto_uri); return ( <> @@ -51,8 +54,9 @@ export default function CreateTransfer({ onConfirm, onBack }: Props): VNode { <CreatePage onBack={onBack} accounts={accounts} - onCreate={(request: MerchantBackend.Transfers.TransferInformation) => { - return informTransfer(request) + onCreate={(request: TalerMerchantApi.TransferInformation) => { + return lib.instance + .informWireTransfer(state.token, request) .then(() => onConfirm()) .catch((error) => { setNotif({ 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 index 92b3f9853..def03fe27 100644 --- 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 @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,7 +19,8 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode, FunctionalComponent } from "preact"; +import { AmountString, PaytoString } from "@gnu-taler/taler-util"; +import { FunctionalComponent, h } from "preact"; import { ListPage as TestedComponent } from "./ListPage.js"; export default { @@ -50,8 +51,8 @@ export const Example = createExample(TestedComponent, { transfers: [ { exchange_url: "http://exchange.url/", - credit_amount: "TESTKUDOS:10", - payto_uri: "payto//x-taler-bank/bank:8080/account", + 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, @@ -62,8 +63,8 @@ export const Example = createExample(TestedComponent, { }, { exchange_url: "http://exchange.url/", - credit_amount: "TESTKUDOS:10", - payto_uri: "payto//x-taler-bank/bank:8080/account", + 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, @@ -74,8 +75,8 @@ export const Example = createExample(TestedComponent, { }, { exchange_url: "http://exchange.url/", - credit_amount: "TESTKUDOS:10", - payto_uri: "payto//x-taler-bank/bank:8080/account", + 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, 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 02b12c4c2..22ad0b8d8 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 @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 @@ -23,11 +23,11 @@ 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 { MerchantBackend } from "../../../../declaration.js"; import { CardTable } from "./Table.js"; +import { TalerMerchantApi } from "@gnu-taler/taler-util"; export interface Props { - transfers: MerchantBackend.Transfers.TransferDetails[]; + transfers: TalerMerchantApi.TransferDetails[]; onLoadMoreBefore?: () => void; onLoadMoreAfter?: () => void; onShowAll: () => void; @@ -75,6 +75,11 @@ export function ListPage({ 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`} /> @@ -125,9 +130,7 @@ export function ListPage({ onCreate={onCreate} onDelete={onDelete} onLoadMoreBefore={onLoadMoreBefore} - hasMoreBefore={!onLoadMoreBefore} onLoadMoreAfter={onLoadMoreAfter} - hasMoreAfter={!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 index b6b1cf328..b9235c669 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 @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,14 +19,14 @@ * @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 { MerchantBackend, WithId } from "../../../../declaration.js"; -import { datetimeFormatForSettings, useSettings } from "../../../../hooks/useSettings.js"; +import { datetimeFormatForSettings, usePreference } from "../../../../hooks/preference.js"; -type Entity = MerchantBackend.Transfers.TransferDetails & WithId; +type Entity = TalerMerchantApi.TransferDetails & WithId; interface Props { transfers: Entity[]; @@ -34,8 +34,6 @@ interface Props { onCreate: () => void; accounts: string[]; onLoadMoreBefore?: () => void; - hasMoreBefore?: boolean; - hasMoreAfter?: boolean; onLoadMoreAfter?: () => void; } @@ -45,8 +43,6 @@ export function CardTable({ onDelete, onLoadMoreAfter, onLoadMoreBefore, - hasMoreAfter, - hasMoreBefore, }: Props): VNode { const [rowSelection, rowSelectionHandler] = useState<string[]>([]); @@ -85,8 +81,6 @@ export function CardTable({ rowSelectionHandler={rowSelectionHandler} onLoadMoreAfter={onLoadMoreAfter} onLoadMoreBefore={onLoadMoreBefore} - hasMoreAfter={hasMoreAfter} - hasMoreBefore={hasMoreBefore} /> ) : ( <EmptyTable /> @@ -103,35 +97,26 @@ interface TableProps { onDelete: (id: Entity) => void; rowSelectionHandler: StateUpdater<string[]>; onLoadMoreBefore?: () => void; - hasMoreBefore?: boolean; - hasMoreAfter?: boolean; onLoadMoreAfter?: () => void; } -function toggleSelected<T>(id: T): (prev: T[]) => T[] { - return (prev: T[]): T[] => - prev.indexOf(id) == -1 ? [...prev, id] : prev.filter((e) => e != id); -} - function Table({ instances, onLoadMoreAfter, onDelete, onLoadMoreBefore, - hasMoreAfter, - hasMoreBefore, }: TableProps): VNode { const { i18n } = useTranslationContext(); - const [settings] = useSettings(); + const [settings] = usePreference(); return ( <div class="table-container"> - {hasMoreBefore && ( + {onLoadMoreBefore && ( <button class="button is-fullwidth" data-tooltip={i18n.str`load more transfers before the first one`} onClick={onLoadMoreBefore} > - <i18n.Translate>load newer transfers</i18n.Translate> + <i18n.Translate>load first page</i18n.Translate> </button> )} <table class="table is-fullwidth is-striped is-hoverable is-fullwidth"> @@ -197,13 +182,13 @@ function Table({ })} </tbody> </table> - {hasMoreAfter && ( + {onLoadMoreAfter && ( <button class="button is-fullwidth" - data-tooltip={i18n.str`load more transfer after the last one`} + data-tooltip={i18n.str`load more transfers after the last one`} onClick={onLoadMoreAfter} > - <i18n.Translate>load older transfers</i18n.Translate> + <i18n.Translate>load next page</i18n.Translate> </button> )} </div> @@ -216,7 +201,7 @@ function EmptyTable(): VNode { <div class="content has-text-grey has-text-centered"> <p> <span class="icon is-large"> - <i class="mdi mdi-emoticon-sad mdi-48px" /> + <i class="mdi mdi-magnify mdi-48px" /> </span> </p> <p> 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 0fdbb9bc3..8b4d1f3cb 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 @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,42 +19,36 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { ErrorType, HttpError } from "@gnu-taler/web-util/browser"; -import { h, VNode } from "preact"; +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 { MerchantBackend } from "../../../../declaration.js"; -import { useInstanceDetails } from "../../../../hooks/instance.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 { HttpStatusCode } from "@gnu-taler/taler-util"; -import { useInstanceBankAccounts } from "../../../../hooks/bank.js"; +import { NotFoundPageOrAdminCreate } from "../../../notfound/index.js"; interface Props { - onUnauthorized: () => VNode; - onLoadError: (error: HttpError<MerchantBackend.ErrorDetail>) => VNode; - onNotFound: () => VNode; onCreate: () => void; } interface Form { - verified?: "yes" | "no"; + verified?: boolean; payto_uri?: string; } export default function ListTransfer({ - onUnauthorized, - onLoadError, onCreate, - onNotFound, }: Props): VNode { - const setFilter = (s?: "yes" | "no") => setForm({ ...form, verified: s }); + const setFilter = (s?: boolean) => setForm({ ...form, verified: s }); const [position, setPosition] = useState<string | undefined>(undefined); const instance = useInstanceBankAccounts(); - const accounts = !instance.ok + const accounts = !instance || (instance instanceof TalerError) || instance.type === "fail" ? [] - : instance.data.accounts.map((a) => a.payto_uri); + : instance.body.accounts.map((a) => a.payto_uri); const [form, setForm] = useState<Form>({ payto_uri: "" }); const shoulUseDefaultAccount = accounts.length === 1 @@ -64,8 +58,8 @@ export default function ListTransfer({ } }, [shoulUseDefaultAccount]) - const isVerifiedTransfers = form.verified === "yes"; - const isNonVerifiedTransfers = form.verified === "no"; + const isVerifiedTransfers = form.verified === true; + const isNonVerifiedTransfers = form.verified === false; const isAllTransfers = form.verified === undefined; const result = useInstanceTransfers( @@ -77,37 +71,37 @@ export default function ListTransfer({ (id) => setPosition(id), ); - if (result.loading) return <Loading />; - if (!result.ok) { - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.NotFound - ) - return onNotFound(); - return onLoadError(result); + 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.data.transfers} - onLoadMoreBefore={ - result.isReachingStart ? result.loadMorePrev : undefined - } - onLoadMoreAfter={result.isReachingEnd ? result.loadMore : undefined} + transfers={result.body} + onLoadMoreBefore={result.isFirstPage ? undefined: result.loadFirst } + onLoadMoreAfter={result.isLastPage ? undefined : result.loadNext} onCreate={onCreate} onDelete={() => { null; }} - // position={position} setPosition={setPosition} onShowAll={() => setFilter(undefined)} - onShowUnverified={() => setFilter("no")} - onShowVerified={() => setFilter("yes")} + onShowUnverified={() => setFilter(false)} + onShowVerified={() => setFilter(true)} isAllTransfers={isAllTransfers} isVerifiedTransfers={isVerifiedTransfers} isNonVerifiedTransfers={isNonVerifiedTransfers} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/update/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/update/index.tsx index 84cc95e72..719f99209 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/transfers/update/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/transfers/update/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 diff --git a/packages/merchant-backoffice-ui/src/paths/instance/update/Update.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/update/Update.stories.tsx index 817a7025c..5bd12e4e9 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/update/Update.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/update/Update.stories.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,7 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { h, VNode, FunctionalComponent } from "preact"; +import { FunctionalComponent, h } from "preact"; import { UpdatePage as TestedComponent } from "./UpdatePage.js"; export default { diff --git a/packages/merchant-backoffice-ui/src/paths/instance/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/update/UpdatePage.tsx index 5b88b550f..cde58967f 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/update/UpdatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/update/UpdatePage.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,8 +19,9 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { Duration, TalerMerchantApi } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { h, VNode } from "preact"; +import { VNode, h } from "preact"; import { useState } from "preact/hooks"; import { AsyncButton } from "../../../components/exception/AsyncButton.js"; import { @@ -28,40 +29,31 @@ import { FormProvider, } from "../../../components/form/FormProvider.js"; import { DefaultInstanceFormFields } from "../../../components/instance/DefaultInstanceFormFields.js"; -import { useInstanceContext } from "../../../context/instance.js"; -import { MerchantBackend } from "../../../declaration.js"; +import { useSessionContext } from "../../../context/session.js"; import { undefinedIfEmpty } from "../../../utils/table.js"; -type Entity = MerchantBackend.Instances.InstanceReconfigurationMessage & { - auth_token?: string; +export type Entity = Omit<Omit<TalerMerchantApi.InstanceReconfigurationMessage, "default_pay_delay">, "default_wire_transfer_delay"> & { + default_pay_delay: Duration, + default_wire_transfer_delay: Duration, }; -//MerchantBackend.Instances.InstanceAuthConfigurationMessage +//TalerMerchantApi.InstanceAuthConfigurationMessage interface Props { - onUpdate: (d: Entity) => void; - selected: MerchantBackend.Instances.QueryInstancesResponse; + onUpdate: (d: TalerMerchantApi.InstanceReconfigurationMessage) => void; + selected: TalerMerchantApi.QueryInstancesResponse; isLoading: boolean; onBack: () => void; } function convert( - from: MerchantBackend.Instances.QueryInstancesResponse, + from: TalerMerchantApi.QueryInstancesResponse, ): Entity { - const { ...rest } = from; - // const accounts = qAccounts - // .filter((a) => a.active) - // .map( - // (a) => - // ({ - // payto_uri: a.payto_uri, - // credit_facade_url: a.credit_facade_url, - // credit_facade_credentials: a.credit_facade_credentials, - // } as MerchantBackend.Instances.MerchantBankAccount), - // ); + const { default_pay_delay, default_wire_transfer_delay, ...rest } = from; + const defaults = { use_stefan: false, - default_pay_delay: { d_us: 2 * 1000 * 1000 * 60 * 60 }, //two hours - default_wire_transfer_delay: { d_us: 2 * 1000 * 1000 * 60 * 60 * 2 }, //two hours + default_pay_delay: Duration.fromTalerProtocolDuration(default_pay_delay), + default_wire_transfer_delay: Duration.fromTalerProtocolDuration(default_wire_transfer_delay), }; return { ...defaults, ...rest }; } @@ -71,21 +63,7 @@ export function UpdatePage({ selected, onBack, }: Props): VNode { - const { id } = useInstanceContext(); - // const currentTokenValue = getTokenValuePart(token); - - // function updateToken(token: string | undefined | null) { - // const value = - // token && token.startsWith("secret-token:") - // ? token.substring("secret-token:".length) - // : token; - - // if (!token) { - // onChangeAuth({ method: "external" }); - // } else { - // onChangeAuth({ method: "token", token: `secret-token:${value}` }); - // } - // } + const { state } = useSessionContext(); const [value, valueHandler] = useState<Partial<Entity>>(convert(selected)); @@ -101,9 +79,9 @@ export function UpdatePage({ default_pay_delay: !value.default_pay_delay ? i18n.str`required` : !!value.default_wire_transfer_delay && - value.default_wire_transfer_delay.d_us !== "forever" && - value.default_pay_delay.d_us !== "forever" && - value.default_pay_delay.d_us > value.default_wire_transfer_delay.d_us ? + value.default_wire_transfer_delay.d_ms !== "forever" && + value.default_pay_delay.d_ms !== "forever" && + value.default_pay_delay.d_ms > value.default_wire_transfer_delay.d_ms ? i18n.str`pay delay can't be greater than wire transfer delay` : undefined, default_wire_transfer_delay: !value.default_wire_transfer_delay ? i18n.str`required` @@ -127,7 +105,13 @@ export function UpdatePage({ ); const submit = async (): Promise<void> => { - await onUpdate(value as Entity); + const { default_pay_delay, default_wire_transfer_delay, ...rest } = value as Required<Entity>; + const result: TalerMerchantApi.InstanceReconfigurationMessage = { + default_pay_delay: Duration.toTalerProtocolDuration(default_pay_delay), + default_wire_transfer_delay: Duration.toTalerProtocolDuration(default_wire_transfer_delay), + ...rest, + } + await onUpdate(result); }; // const [active, setActive] = useState(false); @@ -140,30 +124,10 @@ export function UpdatePage({ <div class="level-left"> <div class="level-item"> <span class="is-size-4"> - <i18n.Translate>Instance id</i18n.Translate>: <b>{id}</b> + <i18n.Translate>Instance id</i18n.Translate>: <b>{state.instance}</b> </span> </div> </div> - {/* <div class="level-right"> - <div class="level-item"> - <h1 class="title"> - <button - class="button is-danger" - data-tooltip={i18n.str`Change the authorization method use for this instance.`} - onClick={(): void => { - setActive(!active); - }} - > - <div class="icon is-left"> - <i class="mdi mdi-lock-reset" /> - </div> - <span> - <i18n.Translate>Manage access token</i18n.Translate> - </span> - </button> - </h1> - </div> - </div> */} </div> </div> </section> diff --git a/packages/merchant-backoffice-ui/src/paths/instance/update/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/update/index.tsx index e44cf5c0f..9da7f7efb 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/update/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/update/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 @@ -13,83 +13,79 @@ 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/> */ -import { HttpStatusCode } from "@gnu-taler/taler-util"; +import { HttpStatusCode, TalerError, TalerMerchantApi, TalerMerchantInstanceHttpClient, TalerMerchantManagementResultByMethod, assertUnreachable } from "@gnu-taler/taler-util"; import { - ErrorType, - HttpError, - HttpResponse, - useTranslationContext, + useTranslationContext } from "@gnu-taler/web-util/browser"; import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; +import { ErrorLoadingMerchant } from "../../../components/ErrorLoadingMerchant.js"; import { Loading } from "../../../components/exception/loading.js"; import { NotificationCard } from "../../../components/menu/index.js"; -import { useInstanceContext } from "../../../context/instance.js"; -import { AccessToken, MerchantBackend } from "../../../declaration.js"; +import { useSessionContext } from "../../../context/session.js"; import { - useInstanceAPI, useInstanceDetails, useManagedInstanceDetails, - useManagementAPI, } from "../../../hooks/instance.js"; import { Notification } from "../../../utils/types.js"; +import { LoginPage } from "../../login/index.js"; +import { NotFoundPageOrAdminCreate } from "../../notfound/index.js"; import { UpdatePage } from "./UpdatePage.js"; export interface Props { onBack: () => void; onConfirm: () => void; - onUnauthorized: () => VNode; - onNotFound: () => VNode; - onLoadError: (e: HttpError<MerchantBackend.ErrorDetail>) => VNode; - onUpdateError: (e: HttpError<MerchantBackend.ErrorDetail>) => void; + // onUnauthorized: () => VNode; + // onNotFound: () => VNode; + // onLoadError: (e: HttpError<TalerErrorDetail>) => VNode; + // onUpdateError: (e: HttpError<TalerErrorDetail>) => void; } export default function Update(props: Props): VNode { - const { updateInstance } = useInstanceAPI(); + const { lib } = useSessionContext(); + const updateInstance = lib.instance.updateCurrentInstance.bind(lib.instance) const result = useInstanceDetails(); - return CommonUpdate(props, result, updateInstance, ); + return CommonUpdate(props, result, updateInstance,); } export function AdminUpdate(props: Props & { instanceId: string }): VNode { - const { updateInstance } = useManagementAPI( - props.instanceId, - ); + const { lib } = useSessionContext(); + const t = lib.subInstanceApi(props.instanceId).instance; + const updateInstance = t.updateCurrentInstance.bind(t) const result = useManagedInstanceDetails(props.instanceId); - return CommonUpdate(props, result, updateInstance, ); + return CommonUpdate(props, result, updateInstance,); } + function CommonUpdate( { onBack, onConfirm, - onLoadError, - onNotFound, - onUpdateError, - onUnauthorized, }: Props, - result: HttpResponse< - MerchantBackend.Instances.QueryInstancesResponse, - MerchantBackend.ErrorDetail - >, - updateInstance: any, + result: TalerMerchantManagementResultByMethod<"getInstanceDetails"> | TalerError | undefined, + updateInstance: typeof TalerMerchantInstanceHttpClient.prototype.updateCurrentInstance, ): VNode { const [notif, setNotif] = useState<Notification | undefined>(undefined); const { i18n } = useTranslationContext(); + const { state } = useSessionContext(); - if (result.loading) return <Loading />; - if (!result.ok) { - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.NotFound - ) - return onNotFound(); - return onLoadError(result); + 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 ( @@ -98,15 +94,18 @@ function CommonUpdate( <UpdatePage onBack={onBack} isLoading={false} - selected={result.data} + selected={result.body} onUpdate={( - d: MerchantBackend.Instances.InstanceReconfigurationMessage, + d: TalerMerchantApi.InstanceReconfigurationMessage, ): Promise<void> => { - return updateInstance(d) + if (state.status !== "loggedIn") { + return Promise.resolve(); + } + return updateInstance(state.token, d) .then(onConfirm) .catch((error: Error) => setNotif({ - message: i18n.str`Failed to create instance`, + message: i18n.str`Failed to update instance`, type: "ERROR", description: error.message, }), diff --git a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/Create.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/Create.stories.tsx index 4857ede97..2e2a58b33 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/Create.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/Create.stories.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 diff --git a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/CreatePage.tsx index 434d69412..8792aabea 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/CreatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/CreatePage.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 @@ -28,14 +28,10 @@ import { FormProvider, } from "../../../../components/form/FormProvider.js"; import { Input } from "../../../../components/form/Input.js"; -import { InputCurrency } from "../../../../components/form/InputCurrency.js"; -import { InputDuration } from "../../../../components/form/InputDuration.js"; -import { InputNumber } from "../../../../components/form/InputNumber.js"; -import { useBackendContext } from "../../../../context/backend.js"; -import { MerchantBackend } from "../../../../declaration.js"; import { InputSelector } from "../../../../components/form/InputSelector.js"; +import { TalerMerchantApi } from "@gnu-taler/taler-util"; -type Entity = MerchantBackend.Webhooks.WebhookAddDetails; +type Entity = TalerMerchantApi.WebhookAddDetails; interface Props { onCreate: (d: Entity) => Promise<void>; @@ -120,7 +116,7 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { <p> The text below support <a target="_blank" rel="noreferrer" href="https://mustache.github.io/mustache.5.html">mustache</a> template engine. Any string between <pre style={{ display: "inline", padding: 0 }}>{{</pre> and <pre style={{ display: "inline", padding: 0 }}>}}</pre> will - be replaced with replaced with the value of the correspoding variable. + be replaced with replaced with the value of the corresponding variable. </p> <p> For example <pre style={{ display: "inline", padding: 0 }}>{{contract_terms.amount}}</pre> will be replaced diff --git a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/index.tsx index 924e6d9b8..70f246ff1 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,33 +19,34 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { TalerMerchantApi } from "@gnu-taler/taler-util"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; -import { Fragment, h, VNode } from "preact"; +import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; import { NotificationCard } from "../../../../components/menu/index.js"; -import { MerchantBackend } from "../../../../declaration.js"; -import { useWebhookAPI } from "../../../../hooks/webhooks.js"; +import { useSessionContext } from "../../../../context/session.js"; import { Notification } from "../../../../utils/types.js"; import { CreatePage } from "./CreatePage.js"; -export type Entity = MerchantBackend.Webhooks.WebhookAddDetails; +export type Entity = TalerMerchantApi.WebhookAddDetails; interface Props { onBack?: () => void; onConfirm: () => void; } export default function CreateWebhook({ onConfirm, onBack }: Props): VNode { - const { createWebhook } = useWebhookAPI(); const [notif, setNotif] = useState<Notification | undefined>(undefined); const { i18n } = useTranslationContext(); + const { lib } = useSessionContext(); + const { state } = useSessionContext(); return ( <> <NotificationCard notification={notif} /> <CreatePage onBack={onBack} - onCreate={(request: MerchantBackend.Webhooks.WebhookAddDetails) => { - return createWebhook(request) + onCreate={(request: TalerMerchantApi.WebhookAddDetails) => { + return lib.instance.addWebhook(state.token, request) .then(() => onConfirm()) .catch((error) => { setNotif({ diff --git a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/List.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/List.stories.tsx index 702e9ba4a..707324d40 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/List.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/List.stories.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 diff --git a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/ListPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/ListPage.tsx index 87e221e3c..3f1feb8e9 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/ListPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/ListPage.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 @@ -20,17 +20,17 @@ */ import { h, VNode } from "preact"; -import { MerchantBackend } from "../../../../declaration.js"; import { useTranslationContext } from "@gnu-taler/web-util/browser"; import { CardTable } from "./Table.js"; +import { TalerMerchantApi } from "@gnu-taler/taler-util"; export interface Props { - webhooks: MerchantBackend.Webhooks.WebhookEntry[]; + webhooks: TalerMerchantApi.WebhookEntry[]; onLoadMoreBefore?: () => void; onLoadMoreAfter?: () => void; onCreate: () => void; - onDelete: (e: MerchantBackend.Webhooks.WebhookEntry) => void; - onSelect: (e: MerchantBackend.Webhooks.WebhookEntry) => void; + onDelete: (e: TalerMerchantApi.WebhookEntry) => void; + onSelect: (e: TalerMerchantApi.WebhookEntry) => void; } export function ListPage({ @@ -55,9 +55,7 @@ export function ListPage({ onDelete={onDelete} onSelect={onSelect} onLoadMoreBefore={onLoadMoreBefore} - hasMoreBefore={!onLoadMoreBefore} onLoadMoreAfter={onLoadMoreAfter} - hasMoreAfter={!onLoadMoreAfter} /> </section> ); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/Table.tsx index 42a179d2c..919285e78 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/Table.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/Table.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,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 { StateUpdater, useState } from "preact/hooks"; -import { MerchantBackend } from "../../../../declaration.js"; -type Entity = MerchantBackend.Webhooks.WebhookEntry; +type Entity = TalerMerchantApi.WebhookEntry; interface Props { webhooks: Entity[]; @@ -32,8 +32,6 @@ interface Props { onSelect: (e: Entity) => void; onCreate: () => void; onLoadMoreBefore?: () => void; - hasMoreBefore?: boolean; - hasMoreAfter?: boolean; onLoadMoreAfter?: () => void; } @@ -44,8 +42,6 @@ export function CardTable({ onSelect, onLoadMoreAfter, onLoadMoreBefore, - hasMoreAfter, - hasMoreBefore, }: Props): VNode { const [rowSelection, rowSelectionHandler] = useState<string[]>([]); @@ -85,8 +81,6 @@ export function CardTable({ rowSelectionHandler={rowSelectionHandler} onLoadMoreAfter={onLoadMoreAfter} onLoadMoreBefore={onLoadMoreBefore} - hasMoreAfter={hasMoreAfter} - hasMoreBefore={hasMoreBefore} /> ) : ( <EmptyTable /> @@ -104,35 +98,26 @@ interface TableProps { onSelect: (e: Entity) => void; rowSelectionHandler: StateUpdater<string[]>; onLoadMoreBefore?: () => void; - hasMoreBefore?: boolean; - hasMoreAfter?: boolean; onLoadMoreAfter?: () => void; } -function toggleSelected<T>(id: T): (prev: T[]) => T[] { - return (prev: T[]): T[] => - prev.indexOf(id) == -1 ? [...prev, id] : prev.filter((e) => e != id); -} - function Table({ instances, onLoadMoreAfter, onDelete, onSelect, onLoadMoreBefore, - hasMoreAfter, - hasMoreBefore, }: TableProps): VNode { const { i18n } = useTranslationContext(); return ( <div class="table-container"> - {hasMoreBefore && ( + {onLoadMoreBefore && ( <button class="button is-fullwidth" data-tooltip={i18n.str`load more webhooks before the first one`} onClick={onLoadMoreBefore} > - <i18n.Translate>load newer webhooks</i18n.Translate> + <i18n.Translate>load first page</i18n.Translate> </button> )} <table class="table is-fullwidth is-striped is-hoverable is-fullwidth"> @@ -186,13 +171,13 @@ function Table({ })} </tbody> </table> - {hasMoreAfter && ( + {onLoadMoreAfter && ( <button class="button is-fullwidth" data-tooltip={i18n.str`load more webhooks after the last one`} onClick={onLoadMoreAfter} > - <i18n.Translate>load older webhooks</i18n.Translate> + <i18n.Translate>load next page</i18n.Translate> </button> )} </div> @@ -205,7 +190,7 @@ function EmptyTable(): VNode { <div class="content has-text-grey has-text-centered"> <p> <span class="icon is-large"> - <i class="mdi mdi-emoticon-sad mdi-48px" /> + <i class="mdi mdi-magnify mdi-48px" /> </span> </p> <p> diff --git a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/index.tsx index a6f6f1511..789b8d73b 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 @@ -20,57 +20,54 @@ */ import { - ErrorType, - HttpError, - useTranslationContext, + HttpStatusCode, + TalerError, + TalerMerchantApi, + assertUnreachable, +} from "@gnu-taler/taler-util"; +import { + useTranslationContext } from "@gnu-taler/web-util/browser"; -import { Fragment, h, VNode } from "preact"; +import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; +import { ErrorLoadingMerchant } from "../../../../components/ErrorLoadingMerchant.js"; import { Loading } from "../../../../components/exception/loading.js"; import { NotificationCard } from "../../../../components/menu/index.js"; -import { MerchantBackend } from "../../../../declaration.js"; -import { - useInstanceWebhooks, - useWebhookAPI, -} from "../../../../hooks/webhooks.js"; +import { useSessionContext } from "../../../../context/session.js"; +import { useInstanceWebhooks } from "../../../../hooks/webhooks.js"; import { Notification } from "../../../../utils/types.js"; +import { LoginPage } from "../../../login/index.js"; +import { NotFoundPageOrAdminCreate } from "../../../notfound/index.js"; import { ListPage } from "./ListPage.js"; -import { HttpStatusCode } from "@gnu-taler/taler-util"; interface Props { - onUnauthorized: () => VNode; - onLoadError: (error: HttpError<MerchantBackend.ErrorDetail>) => VNode; - onNotFound: () => VNode; onCreate: () => void; onSelect: (id: string) => void; } -export default function ListWebhooks({ - onUnauthorized, - onLoadError, - onCreate, - onSelect, - onNotFound, -}: Props): VNode { - const [position, setPosition] = useState<string | undefined>(undefined); +export default function ListWebhooks({ onCreate, onSelect }: Props): VNode { const { i18n } = useTranslationContext(); const [notif, setNotif] = useState<Notification | undefined>(undefined); - const { deleteWebhook } = useWebhookAPI(); - const result = useInstanceWebhooks({ position }, (id) => setPosition(id)); + const { lib } = useSessionContext(); + const { state } = useSessionContext(); + const result = useInstanceWebhooks(); - if (result.loading) return <Loading />; - if (!result.ok) { - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.NotFound - ) - return onNotFound(); - return onLoadError(result); + if (!result) return <Loading />; + if (result instanceof TalerError) { + return <ErrorLoadingMerchant error={result} />; + } + if (result.type === "fail") { + switch (result.case) { + case HttpStatusCode.NotFound: { + return <NotFoundPageOrAdminCreate />; + } + case HttpStatusCode.Unauthorized: { + return <LoginPage /> + } + default: { + assertUnreachable(result); + } + } } return ( @@ -78,17 +75,16 @@ export default function ListWebhooks({ <NotificationCard notification={notif} /> <ListPage - webhooks={result.data.webhooks} - onLoadMoreBefore={ - result.isReachingStart ? result.loadMorePrev : undefined - } - onLoadMoreAfter={result.isReachingEnd ? result.loadMore : undefined} + webhooks={result.body.webhooks} + onLoadMoreBefore={undefined} //result.isFirstPage ? undefined : result.loadFirst} + onLoadMoreAfter={undefined} //result.isLastPage ? undefined : result.loadNext} onCreate={onCreate} onSelect={(e) => { onSelect(e.webhook_id); }} - onDelete={(e: MerchantBackend.Webhooks.WebhookEntry) => - deleteWebhook(e.webhook_id) + onDelete={(e: TalerMerchantApi.WebhookEntry) => { + return lib.instance + .deleteWebhook(state.token, e.webhook_id) .then(() => setNotif({ message: i18n.str`webhook delete successfully`, @@ -101,8 +97,8 @@ export default function ListWebhooks({ type: "ERROR", description: error.message, }), - ) - } + ); + }} /> </Fragment> ); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/update/Update.stories.tsx b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/update/Update.stories.tsx index 8d07cb31f..303d17b72 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/update/Update.stories.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/update/Update.stories.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 diff --git a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/update/UpdatePage.tsx index 76a23b6e5..6aca62582 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/update/UpdatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/update/UpdatePage.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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 @@ -28,10 +28,9 @@ import { FormProvider, } from "../../../../components/form/FormProvider.js"; import { Input } from "../../../../components/form/Input.js"; -import { useBackendContext } from "../../../../context/backend.js"; -import { MerchantBackend, WithId } from "../../../../declaration.js"; +import { TalerMerchantApi } from "@gnu-taler/taler-util"; -type Entity = MerchantBackend.Webhooks.WebhookPatchDetails & WithId; +type Entity = TalerMerchantApi.WebhookPatchDetails & WithId; interface Props { onUpdate: (d: Entity) => Promise<void>; diff --git a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/update/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/update/index.tsx index 3f723ed87..5b2ba7bb9 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/update/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/update/index.tsx @@ -1,6 +1,6 @@ /* This file is part of GNU Taler - (C) 2021-2023 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,71 +19,69 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { HttpStatusCode, TalerError, TalerMerchantApi, assertUnreachable } from "@gnu-taler/taler-util"; import { - ErrorType, - HttpError, - useTranslationContext, + useTranslationContext } from "@gnu-taler/web-util/browser"; -import { Fragment, h, VNode } from "preact"; +import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; +import { ErrorLoadingMerchant } from "../../../../components/ErrorLoadingMerchant.js"; import { Loading } from "../../../../components/exception/loading.js"; import { NotificationCard } from "../../../../components/menu/index.js"; -import { MerchantBackend, WithId } from "../../../../declaration.js"; +import { useSessionContext } from "../../../../context/session.js"; import { - useWebhookAPI, useWebhookDetails, } from "../../../../hooks/webhooks.js"; import { Notification } from "../../../../utils/types.js"; +import { LoginPage } from "../../../login/index.js"; +import { NotFoundPageOrAdminCreate } from "../../../notfound/index.js"; import { UpdatePage } from "./UpdatePage.js"; -import { HttpStatusCode } from "@gnu-taler/taler-util"; -export type Entity = MerchantBackend.Webhooks.WebhookPatchDetails & WithId; +export type Entity = TalerMerchantApi.WebhookPatchDetails & WithId; interface Props { onBack?: () => void; onConfirm: () => void; - onUnauthorized: () => VNode; - onNotFound: () => VNode; - onLoadError: (e: HttpError<MerchantBackend.ErrorDetail>) => VNode; tid: string; } export default function UpdateWebhook({ tid, onConfirm, onBack, - onUnauthorized, - onNotFound, - onLoadError, }: Props): VNode { - const { updateWebhook } = useWebhookAPI(); + const { lib } = useSessionContext(); + const { state } = useSessionContext(); const result = useWebhookDetails(tid); const [notif, setNotif] = useState<Notification | undefined>(undefined); const { i18n } = useTranslationContext(); - if (result.loading) return <Loading />; - if (!result.ok) { - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.Unauthorized - ) - return onUnauthorized(); - if ( - result.type === ErrorType.CLIENT && - result.status === HttpStatusCode.NotFound - ) - return onNotFound(); - return onLoadError(result); + if (!result) return <Loading />; + if (result instanceof TalerError) { + return <ErrorLoadingMerchant error={result} />; + } + if (result.type === "fail") { + switch (result.case) { + case HttpStatusCode.NotFound: { + return <NotFoundPageOrAdminCreate />; + } + case HttpStatusCode.Unauthorized: { + return <LoginPage /> + } + default: { + assertUnreachable(result); + } + } } return ( <Fragment> <NotificationCard notification={notif} /> <UpdatePage - webhook={{ ...result.data, id: tid }} + webhook={{ ...result.body, id: tid }} onBack={onBack} onUpdate={(data) => { - return updateWebhook(tid, data) + return lib.instance.updateWebhook(state.token, tid, data) .then(onConfirm) .catch((error) => { setNotif({ |