diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/reserves/create')
3 files changed, 38 insertions, 37 deletions
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 index 2c3e963b8..de2319636 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatePage.tsx @@ -19,24 +19,23 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.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 { ExchangeBackend, MerchantBackend } from "../../../../declaration.js"; -import { Translate, useTranslator } from "../../../../i18n/index.js"; -import { AsyncButton } from "../../../../components/exception/AsyncButton.js"; -import { canonicalizeBaseUrl, ExchangeKeysJson } from "@gnu-taler/taler-util"; +import { request } from "../../../../hooks/backend.js"; import { PAYTO_WIRE_METHOD_LOOKUP, URL_REGEX, } from "../../../../utils/constants.js"; -import { request } from "../../../../hooks/backend.js"; -import { InputSelector } from "../../../../components/form/InputSelector.js"; type Entity = MerchantBackend.Tips.ReserveCreateRequest; @@ -66,7 +65,7 @@ function ViewStep({ submitForm, setReserve, }: ViewProps): VNode { - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const [wireMethods, setWireMethods] = useState<Array<string>>([]); const [exchangeQueryError, setExchangeQueryError] = useState< string | undefined @@ -82,12 +81,12 @@ function ViewStep({ initial_balance: !reserve.initial_balance ? "cannot be empty" : !(parseInt(reserve.initial_balance.split(":")[1], 10) > 0) - ? i18n`it should be greater than 0` + ? i18n.str`it should be greater than 0` : undefined, exchange_url: !reserve.exchange_url - ? i18n`cannot be empty` + ? i18n.str`cannot be empty` : !URL_REGEX.test(reserve.exchange_url) - ? i18n`must be a valid URL` + ? i18n.str`must be a valid URL` : !exchangeQueryError ? undefined : exchangeQueryError, @@ -106,20 +105,20 @@ function ViewStep({ > <InputCurrency<Entity> name="initial_balance" - label={i18n`Initial balance`} - tooltip={i18n`balance prior to deposit`} + label={i18n.str`Initial balance`} + tooltip={i18n.str`balance prior to deposit`} /> <Input<Entity> name="exchange_url" - label={i18n`Exchange URL`} - tooltip={i18n`URL of exchange`} + 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}> - <Translate>Cancel</Translate> + <i18n.Translate>Cancel</i18n.Translate> </button> )} <AsyncButton @@ -143,12 +142,12 @@ function ViewStep({ }} data-tooltip={ hasErrors - ? i18n`Need to complete marked fields` + ? i18n.str`Need to complete marked fields` : "confirm operation" } disabled={hasErrors} > - <Translate>Next</Translate> + <i18n.Translate>Next</i18n.Translate> </AsyncButton> </div> </Fragment> @@ -157,7 +156,9 @@ function ViewStep({ case Steps.WIRE_METHOD: { const errors: FormErrors<Entity> = { - wire_method: !reserve.wire_method ? i18n`cannot be empty` : undefined, + wire_method: !reserve.wire_method + ? i18n.str`cannot be empty` + : undefined, }; const hasErrors = Object.keys(errors).some( @@ -172,22 +173,22 @@ function ViewStep({ > <InputCurrency<Entity> name="initial_balance" - label={i18n`Initial balance`} - tooltip={i18n`balance prior to deposit`} + label={i18n.str`Initial balance`} + tooltip={i18n.str`balance prior to deposit`} readonly /> <Input<Entity> name="exchange_url" - label={i18n`Exchange URL`} - tooltip={i18n`URL of exchange`} + label={i18n.str`Exchange URL`} + tooltip={i18n.str`URL of exchange`} readonly /> <InputSelector<Entity> name="wire_method" - label={i18n`Wire method`} - tooltip={i18n`method to use for wire transfer`} + label={i18n.str`Wire method`} + tooltip={i18n.str`method to use for wire transfer`} values={wireMethods} - placeholder={i18n`Select one wire method`} + placeholder={i18n.str`Select one wire method`} /> </FormProvider> <div class="buttons is-right mt-5"> @@ -196,19 +197,19 @@ function ViewStep({ class="button" onClick={() => setCurrentStep(Steps.EXCHANGE)} > - <Translate>Back</Translate> + <i18n.Translate>Back</i18n.Translate> </button> )} <AsyncButton onClick={submitForm} data-tooltip={ hasErrors - ? i18n`Need to complete marked fields` + ? i18n.str`Need to complete marked fields` : "confirm operation" } disabled={hasErrors} > - <Translate>Confirm</Translate> + <i18n.Translate>Confirm</i18n.Translate> </AsyncButton> </div> </Fragment> 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 index 9bb228e1f..92427f3dc 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/CreatedSuccessfully.tsx @@ -14,11 +14,11 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { h, VNode } from "preact"; +import { QR } from "../../../../components/exception/QR.js"; import { CreatedSuccessfully as Template } from "../../../../components/notifications/CreatedSuccessfully.js"; import { MerchantBackend } from "../../../../declaration.js"; -import { Translate } from "../../../../i18n/index.js"; -import { QR } from "../../../../components/exception/QR.js"; type Entity = { request: MerchantBackend.Tips.ReserveCreateRequest; @@ -37,7 +37,7 @@ export function CreatedSuccessfully({ onCreateAnother, }: Props): VNode { const link = `${entity.response.payto_uri}?message=${entity.response.reserve_pub}&amount=${entity.request.initial_balance}`; - + const { i18n } = useTranslationContext(); return ( <Template onConfirm={onConfirm} onCreateAnother={onCreateAnother}> <div class="field is-horizontal"> @@ -85,16 +85,16 @@ export function CreatedSuccessfully({ </div> </div> <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}> 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 index 8b3ffb4ac..0d39fc298 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/create/index.tsx @@ -19,12 +19,12 @@ * @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 { useReservesAPI } from "../../../../hooks/reserves.js"; -import { useTranslator } from "../../../../i18n/index.js"; import { Notification } from "../../../../utils/types.js"; import { CreatedSuccessfully } from "./CreatedSuccessfully.js"; import { CreatePage } from "./CreatePage.js"; @@ -35,7 +35,7 @@ interface Props { export default function CreateReserve({ onBack, onConfirm }: Props): VNode { const { createReserve } = useReservesAPI(); const [notif, setNotif] = useState<Notification | undefined>(undefined); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const [createdOk, setCreatedOk] = useState< | { @@ -59,7 +59,7 @@ export default function CreateReserve({ onBack, onConfirm }: Props): VNode { .then((r) => setCreatedOk({ request, response: r.data })) .catch((error) => { setNotif({ - message: i18n`could not create reserve`, + message: i18n.str`could not create reserve`, type: "ERROR", description: error.message, }); |