diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/transfers')
4 files changed, 62 insertions, 58 deletions
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 5b041df7c..5303d14d9 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 @@ -19,6 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { h, VNode } from "preact"; import { useState } from "preact/hooks"; import { AsyncButton } from "../../../../components/exception/AsyncButton.js"; @@ -31,7 +32,6 @@ 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 { Translate, useTranslator } from "../../../../i18n/index.js"; import { CROCKFORD_BASE32_REGEX, URL_REGEX, @@ -46,7 +46,7 @@ interface Props { } export function CreatePage({ accounts, onCreate, onBack }: Props): VNode { - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const { currency } = useConfigContext(); const [state, setState] = useState<Partial<Entity>>({ @@ -58,18 +58,18 @@ export function CreatePage({ accounts, onCreate, onBack }: Props): VNode { const errors: FormErrors<Entity> = { wtid: !state.wtid - ? i18n`cannot be empty` + ? i18n.str`cannot be empty` : !CROCKFORD_BASE32_REGEX.test(state.wtid) - ? i18n`check the id, does not look valid` + ? i18n.str`check the id, does not look valid` : state.wtid.length !== 52 - ? i18n`should have 52 characters, current ${state.wtid.length}` + ? i18n.str`should have 52 characters, current ${state.wtid.length}` : undefined, - payto_uri: !state.payto_uri ? i18n`cannot be empty` : undefined, - credit_amount: !state.credit_amount ? i18n`cannot be empty` : undefined, + payto_uri: !state.payto_uri ? i18n.str`cannot be empty` : undefined, + credit_amount: !state.credit_amount ? i18n.str`cannot be empty` : undefined, exchange_url: !state.exchange_url - ? i18n`cannot be empty` + ? i18n.str`cannot be empty` : !URL_REGEX.test(state.exchange_url) - ? i18n`URL doesn't have the right format` + ? i18n.str`URL doesn't have the right format` : undefined, }; @@ -95,46 +95,46 @@ export function CreatePage({ accounts, onCreate, onBack }: Props): VNode { > <InputSelector name="payto_uri" - label={i18n`Credited bank account`} + label={i18n.str`Credited bank account`} values={accounts} - placeholder={i18n`Select one account`} - tooltip={i18n`Bank account of the merchant where the payment was received`} + placeholder={i18n.str`Select one account`} + tooltip={i18n.str`Bank account of the merchant where the payment was received`} /> <Input<Entity> name="wtid" - label={i18n`Wire transfer ID`} + label={i18n.str`Wire transfer ID`} help="" - tooltip={i18n`unique identifier of the wire transfer used by the exchange, must be 52 characters long`} + tooltip={i18n.str`unique identifier of the wire transfer used by the exchange, must be 52 characters long`} /> <Input<Entity> name="exchange_url" - label={i18n`Exchange URL`} - tooltip={i18n`Base URL of the exchange that made the transfer, should have been in the wire transfer subject`} + label={i18n.str`Exchange URL`} + tooltip={i18n.str`Base URL of the exchange that made the transfer, should have been in the wire transfer subject`} help="http://exchange.taler:8081/" /> <InputCurrency<Entity> name="credit_amount" - label={i18n`Amount credited`} - tooltip={i18n`Actual amount that was wired to the merchant's bank account`} + label={i18n.str`Amount credited`} + tooltip={i18n.str`Actual amount that was wired to the merchant's bank account`} /> </FormProvider> <div class="buttons is-right mt-5"> {onBack && ( <button class="button" onClick={onBack}> - <Translate>Cancel</Translate> + <i18n.Translate>Cancel</i18n.Translate> </button> )} <AsyncButton disabled={hasErrors} data-tooltip={ hasErrors - ? i18n`Need to complete marked fields` + ? i18n.str`Need to complete marked fields` : "confirm operation" } onClick={submitForm} > - <Translate>Confirm</Translate> + <i18n.Translate>Confirm</i18n.Translate> </AsyncButton> </div> </div> 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 db01a57b6..8f41593dd 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 @@ -19,13 +19,13 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.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 { useInstanceDetails } from "../../../../hooks/instance.js"; import { useTransferAPI } from "../../../../hooks/transfer.js"; -import { useTranslator } from "../../../../i18n/index.js"; import { Notification } from "../../../../utils/types.js"; import { CreatePage } from "./CreatePage.js"; @@ -38,7 +38,7 @@ interface Props { export default function CreateTransfer({ onConfirm, onBack }: Props): VNode { const { informTransfer } = useTransferAPI(); const [notif, setNotif] = useState<Notification | undefined>(undefined); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const instance = useInstanceDetails(); const accounts = !instance.ok ? [] @@ -55,7 +55,7 @@ export default function CreateTransfer({ onConfirm, onBack }: Props): VNode { .then(() => onConfirm()) .catch((error) => { setNotif({ - message: i18n`could not inform transfer`, + message: i18n.str`could not inform transfer`, type: "ERROR", description: error.message, }); 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 cad989980..c77f7737b 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 @@ -19,11 +19,11 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.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 { Translate, useTranslator } from "../../../../i18n/index.js"; import { CardTable } from "./Table.js"; export interface Props { @@ -61,7 +61,7 @@ export function ListPage({ }: Props): VNode { const form = { payto_uri: payTo }; - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( <section class="section is-main-section"> <div class="columns"> @@ -73,10 +73,10 @@ export function ListPage({ > <InputSelector name="payto_uri" - label={i18n`Address`} + label={i18n.str`Address`} values={accounts} - placeholder={i18n`Select one account`} - tooltip={i18n`filter by account address`} + placeholder={i18n.str`Select one account`} + tooltip={i18n.str`filter by account address`} /> </FormProvider> </div> @@ -87,30 +87,30 @@ export function ListPage({ <li class={isAllTransfers ? "is-active" : ""}> <div class="has-tooltip-right" - data-tooltip={i18n`remove all filters`} + data-tooltip={i18n.str`remove all filters`} > <a onClick={onShowAll}> - <Translate>All</Translate> + <i18n.Translate>All</i18n.Translate> </a> </div> </li> <li class={isVerifiedTransfers ? "is-active" : ""}> <div class="has-tooltip-right" - data-tooltip={i18n`only show wire transfers confirmed by the merchant`} + data-tooltip={i18n.str`only show wire transfers confirmed by the merchant`} > <a onClick={onShowVerified}> - <Translate>Verified</Translate> + <i18n.Translate>Verified</i18n.Translate> </a> </div> </li> <li class={isNonVerifiedTransfers ? "is-active" : ""}> <div class="has-tooltip-right" - data-tooltip={i18n`only show wire transfers claimed by the exchange`} + data-tooltip={i18n.str`only show wire transfers claimed by the exchange`} > <a onClick={onShowUnverified}> - <Translate>Unverified</Translate> + <i18n.Translate>Unverified</i18n.Translate> </a> </div> </li> 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 2341fb80a..e38d375f9 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 @@ -19,11 +19,11 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { format } from "date-fns"; import { h, VNode } from "preact"; import { StateUpdater, useState } from "preact/hooks"; import { MerchantBackend, WithId } from "../../../../declaration.js"; -import { Translate, useTranslator } from "../../../../i18n/index.js"; type Entity = MerchantBackend.Transfers.TransferDetails & WithId; @@ -49,7 +49,7 @@ export function CardTable({ }: Props): VNode { const [rowSelection, rowSelectionHandler] = useState<string[]>([]); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( <div class="card has-table"> @@ -58,10 +58,13 @@ export function CardTable({ <span class="icon"> <i class="mdi mdi-bank" /> </span> - <Translate>Transfers</Translate> + <i18n.Translate>Transfers</i18n.Translate> </p> <div class="card-header-icon" aria-label="more options"> - <span class="has-tooltip-left" data-tooltip={i18n`add new transfer`}> + <span + class="has-tooltip-left" + data-tooltip={i18n.str`add new transfer`} + > <button class="button is-info" type="button" onClick={onCreate}> <span class="icon is-small"> <i class="mdi mdi-plus mdi-36px" /> @@ -117,42 +120,42 @@ function Table({ hasMoreAfter, hasMoreBefore, }: TableProps): VNode { - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( <div class="table-container"> {onLoadMoreBefore && ( <button class="button is-fullwidth" - data-tooltip={i18n`load more transfers before the first one`} + data-tooltip={i18n.str`load more transfers before the first one`} disabled={!hasMoreBefore} onClick={onLoadMoreBefore} > - <Translate>load newer transfers</Translate> + <i18n.Translate>load newer transfers</i18n.Translate> </button> )} <table class="table is-fullwidth is-striped is-hoverable is-fullwidth"> <thead> <tr> <th> - <Translate>ID</Translate> + <i18n.Translate>ID</i18n.Translate> </th> <th> - <Translate>Credit</Translate> + <i18n.Translate>Credit</i18n.Translate> </th> <th> - <Translate>Address</Translate> + <i18n.Translate>Address</i18n.Translate> </th> <th> - <Translate>Exchange URL</Translate> + <i18n.Translate>Exchange URL</i18n.Translate> </th> <th> - <Translate>Confirmed</Translate> + <i18n.Translate>Confirmed</i18n.Translate> </th> <th> - <Translate>Verified</Translate> + <i18n.Translate>Verified</i18n.Translate> </th> <th> - <Translate>Executed at</Translate> + <i18n.Translate>Executed at</i18n.Translate> </th> <th /> </tr> @@ -165,23 +168,23 @@ function Table({ <td>{i.credit_amount}</td> <td>{i.payto_uri}</td> <td>{i.exchange_url}</td> - <td>{i.confirmed ? i18n`yes` : i18n`no`}</td> - <td>{i.verified ? i18n`yes` : i18n`no`}</td> + <td>{i.confirmed ? i18n.str`yes` : i18n.str`no`}</td> + <td>{i.verified ? i18n.str`yes` : i18n.str`no`}</td> <td> {i.execution_time ? i.execution_time.t_s == "never" - ? i18n`never` + ? i18n.str`never` : format( i.execution_time.t_s * 1000, "yyyy/MM/dd HH:mm:ss", ) - : i18n`unknown`} + : i18n.str`unknown`} </td> <td> {i.verified === undefined ? ( <button class="button is-danger is-small has-tooltip-left" - data-tooltip={i18n`delete selected transfer from the database`} + data-tooltip={i18n.str`delete selected transfer from the database`} onClick={() => onDelete(i)} > Delete @@ -196,11 +199,11 @@ function Table({ {onLoadMoreAfter && ( <button class="button is-fullwidth" - data-tooltip={i18n`load more transfer after the last one`} + data-tooltip={i18n.str`load more transfer after the last one`} disabled={!hasMoreAfter} onClick={onLoadMoreAfter} > - <Translate>load older transfers</Translate> + <i18n.Translate>load older transfers</i18n.Translate> </button> )} </div> @@ -208,6 +211,7 @@ function Table({ } function EmptyTable(): VNode { + const { i18n } = useTranslationContext(); return ( <div class="content has-text-grey has-text-centered"> <p> @@ -216,9 +220,9 @@ function EmptyTable(): VNode { </span> </p> <p> - <Translate> + <i18n.Translate> There is no transfer yet, add more pressing the + sign - </Translate> + </i18n.Translate> </p> </div> ); |