diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/reserves/details')
-rw-r--r-- | packages/merchant-backoffice-ui/src/paths/instance/reserves/details/DetailPage.tsx | 53 |
1 files changed, 27 insertions, 26 deletions
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 index b0b291859..1d54198c8 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/DetailPage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/details/DetailPage.tsx @@ -20,6 +20,7 @@ */ import { Amounts } from "@gnu-taler/taler-util"; +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { format } from "date-fns"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; @@ -29,13 +30,9 @@ 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 { - ContinueModal, - SimpleModal, -} from "../../../../components/modal/index.js"; +import { SimpleModal } from "../../../../components/modal/index.js"; import { MerchantBackend } from "../../../../declaration.js"; import { useTipDetails } from "../../../../hooks/reserves.js"; -import { Translate, useTranslator } from "../../../../i18n/index.js"; import { TipInfo } from "./TipInfo.js"; type Entity = MerchantBackend.Tips.ReserveDetail; @@ -48,7 +45,7 @@ interface Props { } export function DetailPage({ id, selected, onBack }: Props): VNode { - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const didExchangeAckTransfer = Amounts.isNonZero( Amounts.parseOrThrow(selected.exchange_initial_amount), ); @@ -62,22 +59,22 @@ export function DetailPage({ id, selected, onBack }: Props): VNode { <FormProvider object={{ ...selected, id }} valueHandler={null}> <InputDate<Entity> name="creation_time" - label={i18n`Created at`} + label={i18n.str`Created at`} readonly /> <InputDate<Entity> name="expiration_time" - label={i18n`Valid until`} + label={i18n.str`Valid until`} readonly /> <InputCurrency<Entity> name="merchant_initial_amount" - label={i18n`Created balance`} + label={i18n.str`Created balance`} readonly /> <TextField<Entity> name="exchange_url" - label={i18n`Exchange URL`} + label={i18n.str`Exchange URL`} readonly > <a target="_blank" rel="noreferrer" href={selected.exchange_url}> @@ -89,27 +86,27 @@ export function DetailPage({ id, selected, onBack }: Props): VNode { <Fragment> <InputCurrency<Entity> name="exchange_initial_amount" - label={i18n`Exchange balance`} + label={i18n.str`Exchange balance`} readonly /> <InputCurrency<Entity> name="pickup_amount" - label={i18n`Picked up`} + label={i18n.str`Picked up`} readonly /> <InputCurrency<Entity> name="committed_amount" - label={i18n`Committed`} + label={i18n.str`Committed`} readonly /> </Fragment> )} <Input<Entity> name="payto_uri" - label={i18n`Account address`} + label={i18n.str`Account address`} readonly /> - <Input name="id" label={i18n`Subject`} readonly /> + <Input name="id" label={i18n.str`Subject`} readonly /> </FormProvider> {didExchangeAckTransfer ? ( @@ -120,7 +117,7 @@ export function DetailPage({ id, selected, onBack }: Props): VNode { <span class="icon"> <i class="mdi mdi-cash-register" /> </span> - <Translate>Tips</Translate> + <i18n.Translate>Tips</i18n.Translate> </p> </header> <div class="card-content"> @@ -139,18 +136,18 @@ export function DetailPage({ id, selected, onBack }: Props): VNode { ) : ( <Fragment> <p class="is-size-5"> - <Translate> + <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. - </Translate> + </i18n.Translate> </p> <p class="is-size-5"> - <Translate> + <i18n.Translate> If your system supports RFC 8905, you can do this by opening this URI: - </Translate> + </i18n.Translate> </p> <pre> <a target="_blank" rel="noreferrer" href={link}> @@ -163,7 +160,7 @@ export function DetailPage({ id, selected, onBack }: Props): VNode { <div class="buttons is-right mt-5"> <button class="button" onClick={onBack}> - <Translate>Back</Translate> + <i18n.Translate>Back</i18n.Translate> </button> </div> </div> @@ -174,6 +171,7 @@ export function DetailPage({ id, selected, onBack }: Props): VNode { } function EmptyTable(): VNode { + const { i18n } = useTranslationContext(); return ( <div class="content has-text-grey has-text-centered"> <p> @@ -182,7 +180,9 @@ function EmptyTable(): VNode { </span> </p> <p> - <Translate>No tips has been authorized from this reserve</Translate> + <i18n.Translate> + No tips has been authorized from this reserve + </i18n.Translate> </p> </div> ); @@ -193,22 +193,23 @@ interface TableProps { } function Table({ tips }: TableProps): VNode { + const { i18n } = useTranslationContext(); return ( <div class="table-container"> <table class="table is-fullwidth is-striped is-hoverable is-fullwidth"> <thead> <tr> <th> - <Translate>Authorized</Translate> + <i18n.Translate>Authorized</i18n.Translate> </th> <th> - <Translate>Picked up</Translate> + <i18n.Translate>Picked up</i18n.Translate> </th> <th> - <Translate>Reason</Translate> + <i18n.Translate>Reason</i18n.Translate> </th> <th> - <Translate>Expiration</Translate> + <i18n.Translate>Expiration</i18n.Translate> </th> </tr> </thead> |