diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/paths/instance/reserves')
7 files changed, 102 insertions, 96 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, }); 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> diff --git a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/AutorizeTipModal.tsx b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/AutorizeTipModal.tsx index 5200abedf..3a591c555 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/AutorizeTipModal.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/AutorizeTipModal.tsx @@ -19,8 +19,10 @@ * @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 * as yup from "yup"; import { FormErrors, FormProvider, @@ -32,10 +34,8 @@ import { ContinueModal, } from "../../../../components/modal/index.js"; import { MerchantBackend } from "../../../../declaration.js"; -import { useTranslator } from "../../../../i18n/index.js"; import { AuthorizeTipSchema } from "../../../../schemas/index.js"; import { CreatedSuccessfully } from "./CreatedSuccessfully.js"; -import * as yup from "yup"; interface AuthorizeTipModalProps { onCancel: () => void; @@ -54,7 +54,7 @@ export function AuthorizeTipModal({ // const result = useOrderDetails(id) type State = MerchantBackend.Tips.TipCreateRequest; const [form, setValue] = useState<Partial<State>>({}); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); // const [errors, setErrors] = useState<FormErrors<State>>({}) let errors: FormErrors<State> = {}; @@ -104,19 +104,19 @@ export function AuthorizeTipModal({ > <InputCurrency<State> name="amount" - label={i18n`Amount`} - tooltip={i18n`amount of tip`} + label={i18n.str`Amount`} + tooltip={i18n.str`amount of tip`} /> <Input<State> name="justification" - label={i18n`Justification`} + label={i18n.str`Justification`} inputType="multiline" - tooltip={i18n`reason for the tip`} + tooltip={i18n.str`reason for the tip`} /> <Input<State> name="next_url" - label={i18n`URL after tip`} - tooltip={i18n`URL to visit after tip payment`} + label={i18n.str`URL after tip`} + tooltip={i18n.str`URL to visit after tip payment`} /> </FormProvider> </ConfirmModal> 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 index 86b79d1dd..36768855d 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/Table.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/Table.tsx @@ -19,10 +19,10 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { format } from "date-fns"; import { Fragment, h, VNode } from "preact"; import { MerchantBackend, WithId } from "../../../../declaration.js"; -import { Translate, useTranslator } from "../../../../i18n/index.js"; type Entity = MerchantBackend.Tips.ReserveStatusEntry & WithId; @@ -51,7 +51,7 @@ export function CardTable({ return prev; }, new Array<Array<Entity>>([], [])); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( <Fragment> @@ -62,7 +62,7 @@ export function CardTable({ <span class="icon"> <i class="mdi mdi-cash" /> </span> - <Translate>Reserves not yet funded</Translate> + <i18n.Translate>Reserves not yet funded</i18n.Translate> </p> </header> <div class="card-content"> @@ -86,11 +86,14 @@ export function CardTable({ <span class="icon"> <i class="mdi mdi-cash" /> </span> - <Translate>Reserves ready</Translate> + <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`add new reserve`}> + <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" /> @@ -127,26 +130,26 @@ interface TableProps { } function Table({ instances, onNewTip, onSelect, onDelete }: TableProps): VNode { - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( <div class="table-container"> <table class="table is-fullwidth is-striped is-hoverable is-fullwidth"> <thead> <tr> <th> - <Translate>Created at</Translate> + <i18n.Translate>Created at</i18n.Translate> </th> <th> - <Translate>Expires at</Translate> + <i18n.Translate>Expires at</i18n.Translate> </th> <th> - <Translate>Initial</Translate> + <i18n.Translate>Initial</i18n.Translate> </th> <th> - <Translate>Picked up</Translate> + <i18n.Translate>Picked up</i18n.Translate> </th> <th> - <Translate>Committed</Translate> + <i18n.Translate>Committed</i18n.Translate> </th> <th /> </tr> @@ -196,7 +199,7 @@ function Table({ instances, onNewTip, onSelect, onDelete }: TableProps): VNode { <div class="buttons is-right"> <button class="button is-small is-danger has-tooltip-left" - data-tooltip={i18n`delete selected reserve from the database`} + data-tooltip={i18n.str`delete selected reserve from the database`} type="button" onClick={(): void => onDelete(i)} > @@ -204,7 +207,7 @@ function Table({ instances, onNewTip, onSelect, onDelete }: TableProps): VNode { </button> <button class="button is-small is-info has-tooltip-left" - data-tooltip={i18n`authorize new tip from selected reserve`} + data-tooltip={i18n.str`authorize new tip from selected reserve`} type="button" onClick={(): void => onNewTip(i)} > @@ -222,6 +225,7 @@ function Table({ instances, onNewTip, onSelect, onDelete }: TableProps): VNode { } function EmptyTable(): VNode { + const { i18n } = useTranslationContext(); return ( <div class="content has-text-grey has-text-centered"> <p> @@ -230,10 +234,10 @@ function EmptyTable(): VNode { </span> </p> <p> - <Translate> + <i18n.Translate> There is no ready reserves yet, add more pressing the + sign or fund them - </Translate> + </i18n.Translate> </p> </div> ); @@ -244,20 +248,20 @@ function TableWithoutFund({ onSelect, onDelete, }: TableProps): VNode { - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( <div class="table-container"> <table class="table is-fullwidth is-striped is-hoverable is-fullwidth"> <thead> <tr> <th> - <Translate>Created at</Translate> + <i18n.Translate>Created at</i18n.Translate> </th> <th> - <Translate>Expires at</Translate> + <i18n.Translate>Expires at</i18n.Translate> </th> <th> - <Translate>Expected Balance</Translate> + <i18n.Translate>Expected Balance</i18n.Translate> </th> <th /> </tr> @@ -296,7 +300,7 @@ function TableWithoutFund({ <button class="button is-small is-danger jb-modal has-tooltip-left" type="button" - data-tooltip={i18n`delete selected reserve from the database`} + data-tooltip={i18n.str`delete selected reserve from the database`} onClick={(): void => onDelete(i)} > Delete 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 index 182b3f72c..9c3255ee8 100644 --- a/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/index.tsx +++ b/packages/merchant-backoffice-ui/src/paths/instance/reserves/list/index.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 { Loading } from "../../../../components/exception/loading.js"; @@ -29,10 +30,9 @@ import { useInstanceReserves, useReservesAPI, } from "../../../../hooks/reserves.js"; -import { useTranslator } from "../../../../i18n/index.js"; import { Notification } from "../../../../utils/types.js"; -import { CardTable } from "./Table.js"; import { AuthorizeTipModal } from "./AutorizeTipModal.js"; +import { CardTable } from "./Table.js"; interface Props { onUnauthorized: () => VNode; @@ -57,7 +57,7 @@ export default function ListTips({ const result = useInstanceReserves(); const { deleteReserve, authorizeTipReserve } = useReservesAPI(); const [notif, setNotif] = useState<Notification | undefined>(undefined); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const [reserveForTip, setReserveForTip] = useState<string | undefined>( undefined, ); @@ -93,7 +93,7 @@ export default function ListTips({ }); } catch (error) { setNotif({ - message: i18n`could not create the tip`, + message: i18n.str`could not create the tip`, type: "ERROR", description: error instanceof Error ? error.message : undefined, }); |