diff options
author | Sebastian <sebasjm@gmail.com> | 2024-03-07 09:34:06 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2024-03-07 09:34:28 -0300 |
commit | 2b76e32d5714fc410085b5a5ab5c1f4333190fe6 (patch) | |
tree | f890abb9b01c240561d29d489b345b0350b60e7a | |
parent | b059cf4b16663ef2db70a2c2d7af0a6ba5ce2688 (diff) | |
download | wallet-core-2b76e32d5714fc410085b5a5ab5c1f4333190fe6.tar.xz |
time component
17 files changed, 228 insertions, 133 deletions
diff --git a/packages/aml-backoffice-ui/src/Dashboard.tsx b/packages/aml-backoffice-ui/src/Dashboard.tsx index 0fcea3ee9..3951b48c7 100644 --- a/packages/aml-backoffice-ui/src/Dashboard.tsx +++ b/packages/aml-backoffice-ui/src/Dashboard.tsx @@ -1,5 +1,5 @@ import { TranslatedString } from "@gnu-taler/taler-util"; -import { Footer, GlobalNotificationsBanner, Header, notifyError, notifyException, useTranslationContext } from "@gnu-taler/web-util/browser"; +import { Footer, ToastBanner, Header, notifyError, notifyException, useTranslationContext } from "@gnu-taler/web-util/browser"; import { ComponentChildren, Fragment, VNode, h } from "preact"; import { useEffect, useErrorBoundary } from "preact/hooks"; import { useOfficer } from "./hooks/useOfficer.js"; @@ -151,7 +151,11 @@ export function ExchangeAmlFrame({ </Header> </div> - <GlobalNotificationsBanner /> + <div class="fixed z-20 w-full"> + <div class="mx-auto w-4/5"> + <ToastBanner /> + </div> + </div> <div class="-mt-32 flex grow "> {officer.state !== "ready" ? undefined : diff --git a/packages/demobank-ui/src/components/Cashouts/views.tsx b/packages/demobank-ui/src/components/Cashouts/views.tsx index 90ee6bc2f..09e986dd4 100644 --- a/packages/demobank-ui/src/components/Cashouts/views.tsx +++ b/packages/demobank-ui/src/components/Cashouts/views.tsx @@ -15,7 +15,9 @@ */ import { + AbsoluteTime, Amounts, + Duration, HttpStatusCode, TalerError, assertUnreachable, @@ -31,6 +33,7 @@ import { useConversionInfo } from "../../hooks/circuit.js"; import { RenderAmount } from "../../pages/PaytoWireTransferForm.js"; import { ErrorLoadingWithDebug } from "../ErrorLoadingWithDebug.js"; import { State } from "./index.js"; +import { Time } from "../Time.js"; export function FailedView({ error }: State.Failed) { const { i18n } = useTranslationContext(); @@ -141,12 +144,6 @@ export function ReadyView({ </th> </tr> {txs.map((item) => { - const creationTime = - item.creation_time.t_s === "never" - ? "" - : format(item.creation_time.t_s * 1000, "HH:mm:ss", { - locale: dateLocale, - }); return ( <a name="cashout details" @@ -157,14 +154,17 @@ export function ReadyView({ cid: String(item.id), })} > - <td class="relative py-2 pl-2 pr-2 text-sm "> - <div class="font-medium text-gray-900"> - {creationTime} - </div> - { - //FIXME: implement responsive view - } - {/* <dl class="font-normal sm:hidden"> + <td class="relative py-2 pl-2 pr-2 text-sm "> + <div class="font-medium text-gray-900"> + <Time format="HH:mm:ss" + timestamp={AbsoluteTime.fromProtocolTimestamp(item.creation_time)} + // relative={Duration.fromSpec({ days: 1 })} + /> + </div> + { + //FIXME: implement responsive view + } + {/* <dl class="font-normal sm:hidden"> <dt class="sr-only sm:hidden"><i18n.Translate>Amount</i18n.Translate></dt> <dd class="mt-1 truncate text-gray-700"> {item.negative ? i18n.str`sent` : i18n.str`received`} {item.amount ? ( @@ -185,24 +185,24 @@ export function ReadyView({ </pre> </dd> </dl> */} - </td> - <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-red-600 cursor-pointer"> - <RenderAmount - value={Amounts.parseOrThrow(item.amount_debit)} - spec={resp.body.regional_currency_specification} - /> - </td> - <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-green-600 cursor-pointer"> - <RenderAmount - value={Amounts.parseOrThrow(item.amount_credit)} - spec={resp.body.fiat_currency_specification} - /> - </td> + </td> + <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-red-600 cursor-pointer"> + <RenderAmount + value={Amounts.parseOrThrow(item.amount_debit)} + spec={resp.body.regional_currency_specification} + /> + </td> + <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-green-600 cursor-pointer"> + <RenderAmount + value={Amounts.parseOrThrow(item.amount_credit)} + spec={resp.body.fiat_currency_specification} + /> + </td> - <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500 break-all min-w-md"> + <td class="hidden sm:table-cell px-3 py-3.5 text-sm text-gray-500 break-all min-w-md"> - {item.subject} - </td> + {item.subject} + </td> </a> ); })} diff --git a/packages/demobank-ui/src/components/Time.tsx b/packages/demobank-ui/src/components/Time.tsx new file mode 100644 index 000000000..39ce33f60 --- /dev/null +++ b/packages/demobank-ui/src/components/Time.tsx @@ -0,0 +1,71 @@ +/* + This file is part of GNU Taler + (C) 2022 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 { AbsoluteTime, Duration } from "@gnu-taler/taler-util"; +import { useTranslationContext } from "@gnu-taler/web-util/browser"; +import { formatISO, format, formatDuration, intervalToDuration } from "date-fns"; +import { Fragment, h, VNode } from "preact"; + +/** + * + * @param timestamp time to be formatted + * @param relative duration threshold, if the difference is lower + * the timestamp will be formatted as relative time from "now" + * + * @returns + */ +export function Time({ + timestamp, + relative, + format: formatString, +}: { + timestamp: AbsoluteTime | undefined; + relative?: Duration, + format: string; +}): VNode { + const { i18n, dateLocale } = useTranslationContext() + if (!timestamp) return <Fragment /> + + if (timestamp.t_ms === "never") { + return <time >{i18n.str`never`}</time> + } + + const now = AbsoluteTime.now(); + const diff = AbsoluteTime.difference(now, timestamp) + if (relative && now.t_ms !== "never" && Duration.cmp(diff, relative) === -1) { + const d = intervalToDuration({ + start: now.t_ms, + end: timestamp.t_ms + }) + d.seconds = 0 + const duration = formatDuration(d, { locale: dateLocale }) + const isFuture = AbsoluteTime.cmp(now, timestamp) < 0 + if (isFuture) { + return <time dateTime={formatISO(timestamp.t_ms)}> + <i18n.Translate>in {duration}</i18n.Translate> + </time> + } else { + return <time dateTime={formatISO(timestamp.t_ms)}> + <i18n.Translate>{duration} ago</i18n.Translate> + </time> + } + } + return ( + <time dateTime={formatISO(timestamp.t_ms)}> + {format(timestamp.t_ms, formatString, { locale: dateLocale })} + </time> + ); +} diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx b/packages/demobank-ui/src/components/Transactions/views.tsx index cdf134b2f..7da9fc5a9 100644 --- a/packages/demobank-ui/src/components/Transactions/views.tsx +++ b/packages/demobank-ui/src/components/Transactions/views.tsx @@ -20,6 +20,8 @@ import { Fragment, VNode, h } from "preact"; import { useBankCoreApiContext } from "../../context/config.js"; import { RenderAmount } from "../../pages/PaytoWireTransferForm.js"; import { State } from "./index.js"; +import { Duration } from "@gnu-taler/taler-util"; +import { Time } from "../Time.js"; export function ReadyView({ transactions, @@ -107,19 +109,18 @@ export function ReadyView({ </th> </tr> {txs.map((item) => { - const time = - item.when.t_ms === "never" - ? "" - : format(item.when.t_ms, "HH:mm:ss", { - locale: dateLocale, - }); return ( <tr key={idx} class="border-b border-gray-200 last:border-none" > <td class="relative py-2 pl-2 pr-2 text-sm "> - <div class="font-medium text-gray-900">{time}</div> + <div class="font-medium text-gray-900"> + <Time format="HH:mm:ss" + timestamp={item.when} + // relative={Duration.fromSpec({ days: 1 })} + /> + </div> <dl class="font-normal sm:hidden"> <dt class="sr-only sm:hidden"> <i18n.Translate>Amount</i18n.Translate> diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx index b6bfe1cfb..e1b8d6b83 100644 --- a/packages/demobank-ui/src/pages/BankFrame.tsx +++ b/packages/demobank-ui/src/pages/BankFrame.tsx @@ -17,12 +17,12 @@ import { Amounts, TalerError, TranslatedString } from "@gnu-taler/taler-util"; import { Footer, - GlobalNotificationsBanner, Header, Loading, + ToastBanner, notifyError, notifyException, - useTranslationContext, + useTranslationContext } from "@gnu-taler/web-util/browser"; import { ComponentChildren, VNode, h } from "preact"; import { useEffect, useErrorBoundary } from "preact/hooks"; @@ -146,7 +146,7 @@ export function BankFrame({ <div class="fixed z-20 w-full"> <div class="mx-auto w-4/5"> - <GlobalNotificationsBanner /> + <ToastBanner /> </div> </div> diff --git a/packages/demobank-ui/src/pages/SolveChallengePage.tsx b/packages/demobank-ui/src/pages/SolveChallengePage.tsx index b7fc82a94..1bafbc3eb 100644 --- a/packages/demobank-ui/src/pages/SolveChallengePage.tsx +++ b/packages/demobank-ui/src/pages/SolveChallengePage.tsx @@ -17,6 +17,7 @@ import { AbsoluteTime, Amounts, + Duration, HttpStatusCode, TalerCorebankApi, TalerError, @@ -47,6 +48,7 @@ import { undefinedIfEmpty } from "../utils.js"; import { RenderAmount } from "./PaytoWireTransferForm.js"; import { OperationNotFound } from "./WithdrawalQRCode.js"; import { useNavigationContext } from "../context/navigation.js"; +import { Time } from "../components/Time.js"; export function SolveChallengePage({ onChallengeCompleted, @@ -533,9 +535,9 @@ function ChallengeDetails({ <i18n.Translate>Sent at</i18n.Translate> </dt> <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"> - {format(challenge.sent.t_ms, "dd/MM/yyyy HH:mm:ss", { - locale: dateLocale, - })} + <Time format="dd/MM/yyyy HH:mm:ss" + timestamp={challenge.sent} + relative={Duration.fromSpec({ days: 1 })} /> </dd> </div> )} diff --git a/packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx b/packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx index f4b2130a9..33115c16a 100644 --- a/packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx +++ b/packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx @@ -14,7 +14,9 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ import { + AbsoluteTime, Amounts, + Duration, HttpStatusCode, TalerError, assertUnreachable, @@ -30,6 +32,7 @@ import { ErrorLoadingWithDebug } from "../../components/ErrorLoadingWithDebug.js import { useCashoutDetails, useConversionInfo } from "../../hooks/circuit.js"; import { RouteDefinition } from "../../route.js"; import { RenderAmount } from "../PaytoWireTransferForm.js"; +import { Time } from "../../components/Time.js"; interface Props { id: string; @@ -131,11 +134,10 @@ export function ShowCashoutDetails({ id, routeClose }: Props): VNode { <i18n.Translate>Created</i18n.Translate> </dt> <dd class="text-sm "> - {format( - result.body.creation_time.t_s * 1000, - "dd/MM/yyyy HH:mm:ss", - { locale: dateLocale }, - )} + <Time format="dd/MM/yyyy HH:mm:ss" + timestamp={AbsoluteTime.fromProtocolTimestamp(result.body.creation_time)} + // relative={Duration.fromSpec({ days: 1 })} + /> </dd> </div> ) : undefined} diff --git a/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx b/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx index 8eb0cd717..edc1d9a11 100644 --- a/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx +++ b/packages/merchant-backoffice-ui/src/InstanceRoutes.tsx @@ -19,64 +19,62 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { TranslatedString } from "@gnu-taler/taler-util"; import { - useTranslationContext, - HttpError, ErrorType, - GlobalNotificationsBanner, + HttpError, + useTranslationContext } from "@gnu-taler/web-util/browser"; import { format } from "date-fns"; -import { Fragment, FunctionComponent, h, VNode } from "preact"; -import { Route, route, Router } from "preact-router"; -import { useCallback, useEffect, useErrorBoundary, useMemo, useState } from "preact/hooks"; +import { Fragment, FunctionComponent, VNode, h } from "preact"; +import { Route, Router, route } from "preact-router"; +import { useEffect, useErrorBoundary, useMemo, useState } from "preact/hooks"; import { Loading } from "./components/exception/loading.js"; import { Menu, NotificationCard } from "./components/menu/index.js"; -import { useBackendContext } from "./context/backend.js"; import { InstanceContextProvider } from "./context/instance.js"; +import { LoginToken, MerchantBackend } from "./declaration.js"; +import { useInstanceBankAccounts } from "./hooks/bank.js"; import { useBackendDefaultToken, useBackendInstanceToken, useSimpleLocalStorage, } from "./hooks/index.js"; import { useInstanceKYCDetails } from "./hooks/instance.js"; +import { dateFormatForSettings, useSettings } from "./hooks/useSettings.js"; import InstanceCreatePage from "./paths/admin/create/index.js"; import InstanceListPage from "./paths/admin/list/index.js"; -import TokenPage from "./paths/instance/token/index.js"; +import BankAccountCreatePage from "./paths/instance/accounts/create/index.js"; +import BankAccountListPage from "./paths/instance/accounts/list/index.js"; +import BankAccountUpdatePage from "./paths/instance/accounts/update/index.js"; import ListKYCPage from "./paths/instance/kyc/list/index.js"; import OrderCreatePage from "./paths/instance/orders/create/index.js"; import OrderDetailsPage from "./paths/instance/orders/details/index.js"; import OrderListPage from "./paths/instance/orders/list/index.js"; +import ValidatorCreatePage from "./paths/instance/otp_devices/create/index.js"; +import ValidatorListPage from "./paths/instance/otp_devices/list/index.js"; +import ValidatorUpdatePage from "./paths/instance/otp_devices/update/index.js"; import ProductCreatePage from "./paths/instance/products/create/index.js"; import ProductListPage from "./paths/instance/products/list/index.js"; import ProductUpdatePage from "./paths/instance/products/update/index.js"; -import BankAccountCreatePage from "./paths/instance/accounts/create/index.js"; -import BankAccountListPage from "./paths/instance/accounts/list/index.js"; -import BankAccountUpdatePage from "./paths/instance/accounts/update/index.js"; import TemplateCreatePage from "./paths/instance/templates/create/index.js"; -import TemplateUsePage from "./paths/instance/templates/use/index.js"; -import TemplateQrPage from "./paths/instance/templates/qr/index.js"; import TemplateListPage from "./paths/instance/templates/list/index.js"; +import TemplateQrPage from "./paths/instance/templates/qr/index.js"; import TemplateUpdatePage from "./paths/instance/templates/update/index.js"; -import WebhookCreatePage from "./paths/instance/webhooks/create/index.js"; -import WebhookListPage from "./paths/instance/webhooks/list/index.js"; -import WebhookUpdatePage from "./paths/instance/webhooks/update/index.js"; -import ValidatorCreatePage from "./paths/instance/otp_devices/create/index.js"; -import ValidatorListPage from "./paths/instance/otp_devices/list/index.js"; -import ValidatorUpdatePage from "./paths/instance/otp_devices/update/index.js"; +import TemplateUsePage from "./paths/instance/templates/use/index.js"; +import TokenPage from "./paths/instance/token/index.js"; import TransferCreatePage from "./paths/instance/transfers/create/index.js"; import TransferListPage from "./paths/instance/transfers/list/index.js"; import InstanceUpdatePage, { AdminUpdate as InstanceAdminUpdatePage, Props as InstanceUpdatePageProps, } from "./paths/instance/update/index.js"; +import WebhookCreatePage from "./paths/instance/webhooks/create/index.js"; +import WebhookListPage from "./paths/instance/webhooks/list/index.js"; +import WebhookUpdatePage from "./paths/instance/webhooks/update/index.js"; import { LoginPage } from "./paths/login/index.js"; import NotFoundPage from "./paths/notfound/index.js"; -import { Notification } from "./utils/types.js"; -import { LoginToken, MerchantBackend } from "./declaration.js"; import { Settings } from "./paths/settings/index.js"; -import { dateFormatForSettings, useSettings } from "./hooks/useSettings.js"; -import { TranslatedString } from "@gnu-taler/taler-util"; -import { useInstanceBankAccounts } from "./hooks/bank.js"; +import { Notification } from "./utils/types.js"; export enum InstancePaths { error = "/error", diff --git a/packages/taler-util/src/http-client/types.ts b/packages/taler-util/src/http-client/types.ts index e9266e6a3..e7c7eb4c9 100644 --- a/packages/taler-util/src/http-client/types.ts +++ b/packages/taler-util/src/http-client/types.ts @@ -17,7 +17,7 @@ import { import { PaytoString, codecForPaytoString } from "../payto.js"; import { AmountString } from "../taler-types.js"; import { TalerActionString, codecForTalerActionString } from "../taleruri.js"; -import { codecForTimestamp } from "../time.js"; +import { TalerProtocolDuration, TalerProtocolTimestamp, codecForTimestamp } from "../time.js"; export type UserAndPassword = { username: string; @@ -163,19 +163,9 @@ type ImageDataUrl = string; type WadId = string; -interface Timestamp { - // Seconds since epoch, or the special - // value "never" to represent an event that will - // never happen. - t_s: number | "never"; -} +type Timestamp = TalerProtocolTimestamp -interface RelativeTime { - // Duration in microseconds or "forever" - // to represent an infinite duration. Numeric - // values are capped at 2^53 - 1 inclusive. - d_us: number | "forever"; -} +type RelativeTime = TalerProtocolDuration export interface LoginToken { token: AccessToken; diff --git a/packages/taler-util/src/time.ts b/packages/taler-util/src/time.ts index 66bde4fa2..cec41fdd0 100644 --- a/packages/taler-util/src/time.ts +++ b/packages/taler-util/src/time.ts @@ -552,6 +552,9 @@ const DAYS = HOURS * 24; const MONTHS = DAYS * 30; const YEARS = DAYS * 365; +/** + * @deprecated use Duration.fromSpec + */ export function durationFromSpec(spec: { seconds?: number; minutes?: number; diff --git a/packages/taler-wallet-webextension/src/components/Time.tsx b/packages/taler-wallet-webextension/src/components/Time.tsx index 7ec91d56c..eee295756 100644 --- a/packages/taler-wallet-webextension/src/components/Time.tsx +++ b/packages/taler-wallet-webextension/src/components/Time.tsx @@ -18,6 +18,11 @@ import { AbsoluteTime } from "@gnu-taler/taler-util"; import { formatISO, format } from "date-fns"; import { h, VNode } from "preact"; +/** + * + * @deprecated use web-util + * @returns + */ export function Time({ timestamp, format: formatString, diff --git a/packages/web-util/src/components/Attention.tsx b/packages/web-util/src/components/Attention.tsx index 50378e85a..4172c0c9b 100644 --- a/packages/web-util/src/components/Attention.tsx +++ b/packages/web-util/src/components/Attention.tsx @@ -9,10 +9,11 @@ interface Props { timeout?: Duration, } export function Attention({ type = "info", title, children, onClose, timeout = Duration.getForever() }: Props): VNode { + return <div class={`group attention-${type} mt-2 shadow-lg`}> - <style>{` + {timeout.d_ms === "forever" ? undefined : <style>{` .progress { - animation: notificationTimeoutBar 3s ease-in-out; + animation: notificationTimeoutBar ${Math.round(timeout.d_ms / 1000)}s ease-in-out; animation-fill-mode:both; } @@ -21,6 +22,7 @@ export function Attention({ type = "info", title, children, onClose, timeout = D 100% { width: 100%; } } `}</style> + } <div data-timed={timeout.d_ms !== "forever"} class="rounded-md data-[timed=true]:rounded-b-none group-[.attention-info]:bg-blue-50 group-[.attention-low]:bg-gray-100 group-[.attention-warning]:bg-yellow-50 group-[.attention-danger]:bg-red-50 group-[.attention-success]:bg-green-50 p-4 shadow"> <div class="flex"> diff --git a/packages/web-util/src/components/GlobalNotificationBanner.tsx b/packages/web-util/src/components/GlobalNotificationBanner.tsx deleted file mode 100644 index b0a06f7e1..000000000 --- a/packages/web-util/src/components/GlobalNotificationBanner.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { Fragment, VNode, h } from "preact" -import { Attention, GLOBAL_NOTIFICATION_TIMEOUT, useNotifications } from "../index.browser.js" - -export function GlobalNotificationsBanner(): VNode { - const notifs = useNotifications() - if (notifs.length === 0) return <Fragment /> - return <Fragment> { - notifs.map(n => { - switch (n.message.type) { - case "error": - return <Attention type="danger" title={n.message.title} onClose={() => { - n.remove() - }} timeout={GLOBAL_NOTIFICATION_TIMEOUT}> - {n.message.description && - <div class="mt-2 text-sm text-red-700"> - {n.message.description} - </div> - } - </Attention> - case "info": - return <Attention type="success" title={n.message.title} onClose={() => { - n.remove(); - }} timeout={GLOBAL_NOTIFICATION_TIMEOUT} /> - } - })} - </Fragment> -} diff --git a/packages/web-util/src/components/LocalNotificationBanner.tsx b/packages/web-util/src/components/NotificationBanner.tsx index 62733ab3c..62733ab3c 100644 --- a/packages/web-util/src/components/LocalNotificationBanner.tsx +++ b/packages/web-util/src/components/NotificationBanner.tsx diff --git a/packages/web-util/src/components/ToastBanner.tsx b/packages/web-util/src/components/ToastBanner.tsx new file mode 100644 index 000000000..2424b17ff --- /dev/null +++ b/packages/web-util/src/components/ToastBanner.tsx @@ -0,0 +1,44 @@ +import { Fragment, VNode, h } from "preact" +import { Attention, GLOBAL_NOTIFICATION_TIMEOUT as GLOBAL_TOAST_TIMEOUT, useNotifications } from "../index.browser.js" + +/** + * Toasts should be considered when displaying these types of information to the user: + * + * Low attention messages that do not require user action + * Singular status updates + * Confirmations + * Information that does not need to be followed up + * + * Do not use toasts if the information contains the following: + * + * High attention and crtitical information + * Time-sensitive information + * Requires user action or input + * Batch updates + * + * @returns + */ +export function ToastBanner(): VNode { + const notifs = useNotifications() + if (notifs.length === 0) return <Fragment /> + return <Fragment> { + notifs.map(n => { + switch (n.message.type) { + case "error": + return <Attention type="danger" title={n.message.title} onClose={() => { + n.remove() + }} timeout={GLOBAL_TOAST_TIMEOUT}> + {n.message.description && + <div class="mt-2 text-sm text-red-700"> + {n.message.description} + </div> + } + </Attention> + case "info": + return <Attention type="success" title={n.message.title} onClose={() => { + n.remove(); + }} timeout={GLOBAL_TOAST_TIMEOUT} /> + } + })} + </Fragment> +} diff --git a/packages/web-util/src/components/index.ts b/packages/web-util/src/components/index.ts index 4ef840c7d..d7ea41874 100644 --- a/packages/web-util/src/components/index.ts +++ b/packages/web-util/src/components/index.ts @@ -8,5 +8,5 @@ export * from "./Header.js"; export * from "./Footer.js"; export * from "./Button.js"; export * from "./ShowInputErrorLabel.js"; -export * from "./LocalNotificationBanner.js"; -export * from "./GlobalNotificationBanner.js"; +export * from "./NotificationBanner.js"; +export * from "./ToastBanner.js"; diff --git a/packages/web-util/src/hooks/useNotifications.ts b/packages/web-util/src/hooks/useNotifications.ts index d8a927461..000abbc94 100644 --- a/packages/web-util/src/hooks/useNotifications.ts +++ b/packages/web-util/src/hooks/useNotifications.ts @@ -32,7 +32,7 @@ const storage = memoryMap<Map<string, NotificationMessage>>(); const NOTIFICATION_KEY = "notification"; export const GLOBAL_NOTIFICATION_TIMEOUT = Duration.fromSpec({ - minutes: 2, + seconds: 5, }); function removeFromStorage(n: NotificationMessage) { @@ -164,11 +164,11 @@ export function useLocalNotification(): [ const notif = !value ? undefined : { - message: value, - remove: () => { - setter(undefined); - }, - }; + message: value, + remove: () => { + setter(undefined); + }, + }; async function errorHandling(cb: (notify: typeof errorMap) => Promise<void>) { try { @@ -194,8 +194,8 @@ type HandlerMaker = <T extends OperationResult<A, B>, A, B>( onOperationSuccess: | ((result: T extends OperationOk<any> ? T : never) => void) | (( - result: T extends OperationOk<any> ? T : never, - ) => TranslatedString | undefined), + result: T extends OperationOk<any> ? T : never, + ) => TranslatedString | undefined), onOperationFail: ( d: T extends OperationFail<any> ? T : never, ) => TranslatedString, @@ -211,19 +211,19 @@ export function useLocalNotificationHandler(): [ const notif = !value ? undefined : { - message: value, - remove: () => { - setter(undefined); - }, - }; + message: value, + remove: () => { + setter(undefined); + }, + }; function makeHandler<T extends OperationResult<A, B>, A, B>( onClick: () => Promise<T | undefined>, onOperationSuccess: | ((result: T extends OperationOk<any> ? T : never) => void) | (( - result: T extends OperationOk<any> ? T : never, - ) => TranslatedString | undefined), + result: T extends OperationOk<any> ? T : never, + ) => TranslatedString | undefined), onOperationFail: ( d: T extends OperationFail<any> ? T : never, ) => TranslatedString, |