diff options
Diffstat (limited to 'packages/merchant-backoffice-ui/src/components/modal/index.tsx')
-rw-r--r-- | packages/merchant-backoffice-ui/src/components/modal/index.tsx | 96 |
1 files changed, 52 insertions, 44 deletions
diff --git a/packages/merchant-backoffice-ui/src/components/modal/index.tsx b/packages/merchant-backoffice-ui/src/components/modal/index.tsx index 6e5575f63..c9c7d0ce5 100644 --- a/packages/merchant-backoffice-ui/src/components/modal/index.tsx +++ b/packages/merchant-backoffice-ui/src/components/modal/index.tsx @@ -19,12 +19,12 @@ * @author Sebastian Javier Marchano (sebasjm) */ +import { useTranslationContext } from "@gnu-taler/web-util/lib/index.browser"; import { ComponentChildren, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { useInstanceContext } from "../../context/instance.js"; -import { Translate, useTranslator } from "../../i18n/index.js"; import { DEFAULT_REQUEST_TIMEOUT } from "../../utils/constants.js"; -import { Loading, Spinner } from "../exception/loading.js"; +import { Spinner } from "../exception/loading.js"; import { FormProvider } from "../form/FormProvider.js"; import { Input } from "../form/Input.js"; @@ -49,6 +49,7 @@ export function ConfirmModal({ disabled, label = "Confirm", }: Props): VNode { + const { i18n } = useTranslationContext(); return ( <div class={active ? "modal is-active" : "modal"}> <div class="modal-background " onClick={onCancel} /> @@ -65,14 +66,14 @@ export function ConfirmModal({ <footer class="modal-card-foot"> <div class="buttons is-right" style={{ width: "100%" }}> <button class="button " onClick={onCancel}> - <Translate>Cancel</Translate> + <i18n.Translate>Cancel</i18n.Translate> </button> <button class={danger ? "button is-danger " : "button is-info "} disabled={disabled} onClick={onConfirm} > - <Translate>{label}</Translate> + <i18n.Translate>{label}</i18n.Translate> </button> </div> </footer> @@ -94,6 +95,7 @@ export function ContinueModal({ children, disabled, }: Props): VNode { + const { i18n } = useTranslationContext(); return ( <div class={active ? "modal is-active" : "modal"}> <div class="modal-background " onClick={onCancel} /> @@ -110,7 +112,7 @@ export function ContinueModal({ disabled={disabled} onClick={onConfirm} > - <Translate>Continue</Translate> + <i18n.Translate>Continue</i18n.Translate> </button> </div> </footer> @@ -147,6 +149,7 @@ export function ClearConfirmModal({ onConfirm, children, }: Props & { onClear?: () => void }): VNode { + const { i18n } = useTranslationContext(); return ( <div class="modal is-active"> <div class="modal-background " onClick={onCancel} /> @@ -163,19 +166,19 @@ export function ClearConfirmModal({ onClick={onClear} disabled={onClear === undefined} > - <Translate>Clear</Translate> + <i18n.Translate>Clear</i18n.Translate> </button> )} <div class="buttons is-right" style={{ width: "100%" }}> <button class="button " onClick={onCancel}> - <Translate>Cancel</Translate> + <i18n.Translate>Cancel</i18n.Translate> </button> <button class="button is-info" onClick={onConfirm} disabled={onConfirm === undefined} > - <Translate>Confirm</Translate> + <i18n.Translate>Confirm</i18n.Translate> </button> </div> </footer> @@ -210,7 +213,7 @@ export function DeleteModal({ onConfirm={() => onConfirm(element.id)} > <p> - If you delete the instance named <b>"{element.name}"</b> (ID:{" "} + If you delete the instance named <b>"{element.name}"</b> (ID:{" "} <b>{element.id}</b>), the merchant will no longer be able to process orders or refunds </p> @@ -241,12 +244,13 @@ export function PurgeModal({ onConfirm={() => onConfirm(element.id)} > <p> - If you purge the instance named <b>"{element.name}"</b> (ID:{" "} - <b>{element.id}</b>), you will also delete all it's transaction data. + If you purge the instance named <b>"{element.name}"</b> (ID:{" "} + <b>{element.id}</b>), you will also delete all it's transaction + data. </p> <p> The instance will disappear from your list, and you will no longer be - able to access it's data. + able to access it's data. </p> <p class="warning"> Purging an instance <b>cannot be undone</b>. @@ -275,20 +279,22 @@ export function UpdateTokenModal({ new_token: "", repeat_token: "", }); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const hasInputTheCorrectOldToken = oldToken && oldToken !== form.old_token; const errors = { old_token: hasInputTheCorrectOldToken - ? i18n`is not the same as the current access token` + ? i18n.str`is not the same as the current access token` : undefined, new_token: !form.new_token - ? i18n`cannot be empty` + ? i18n.str`cannot be empty` : form.new_token === form.old_token - ? i18n`cannot be the same as the old token` + ? i18n.str`cannot be the same as the old token` : undefined, repeat_token: - form.new_token !== form.repeat_token ? i18n`is not the same` : undefined, + form.new_token !== form.repeat_token + ? i18n.str`is not the same` + : undefined, }; const hasErrors = Object.keys(errors).some( @@ -297,7 +303,7 @@ export function UpdateTokenModal({ const instance = useInstanceContext(); - const text = i18n`You are updating the access token from instance with id ${instance.id}`; + const text = i18n.str`You are updating the access token from instance with id ${instance.id}`; return ( <ClearConfirmModal @@ -313,28 +319,28 @@ export function UpdateTokenModal({ {oldToken && ( <Input<State> name="old_token" - label={i18n`Old access token`} - tooltip={i18n`access token currently in use`} + label={i18n.str`Old access token`} + tooltip={i18n.str`access token currently in use`} inputType="password" /> )} <Input<State> name="new_token" - label={i18n`New access token`} - tooltip={i18n`next access token to be used`} + label={i18n.str`New access token`} + tooltip={i18n.str`next access token to be used`} inputType="password" /> <Input<State> name="repeat_token" - label={i18n`Repeat access token`} - tooltip={i18n`confirm the same access token`} + label={i18n.str`Repeat access token`} + tooltip={i18n.str`confirm the same access token`} inputType="password" /> </FormProvider> <p> - <Translate> + <i18n.Translate> Clearing the access token will mean public access to the instance - </Translate> + </i18n.Translate> </p> </div> <div class="column" /> @@ -353,16 +359,18 @@ export function SetTokenNewInstanceModal({ new_token: "", repeat_token: "", }); - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); const errors = { new_token: !form.new_token - ? i18n`cannot be empty` + ? i18n.str`cannot be empty` : form.new_token === form.old_token - ? i18n`cannot be the same as the old access token` + ? i18n.str`cannot be the same as the old access token` : undefined, repeat_token: - form.new_token !== form.repeat_token ? i18n`is not the same` : undefined, + form.new_token !== form.repeat_token + ? i18n.str`is not the same` + : undefined, }; const hasErrors = Object.keys(errors).some( @@ -374,7 +382,7 @@ export function SetTokenNewInstanceModal({ <div class="modal-background " onClick={onCancel} /> <div class="modal-card"> <header class="modal-card-head"> - <p class="modal-card-title">{i18n`You are setting the access token for the new instance`}</p> + <p class="modal-card-title">{i18n.str`You are setting the access token for the new instance`}</p> <button class="delete " aria-label="close" onClick={onCancel} /> </header> <section class="modal-card-body is-main-section"> @@ -388,22 +396,22 @@ export function SetTokenNewInstanceModal({ > <Input<State> name="new_token" - label={i18n`New access token`} - tooltip={i18n`next access token to be used`} + label={i18n.str`New access token`} + tooltip={i18n.str`next access token to be used`} inputType="password" /> <Input<State> name="repeat_token" - label={i18n`Repeat access token`} - tooltip={i18n`confirm the same access token`} + label={i18n.str`Repeat access token`} + tooltip={i18n.str`confirm the same access token`} inputType="password" /> </FormProvider> <p> - <Translate> + <i18n.Translate> With external authorization method no check will be done by the merchant backend - </Translate> + </i18n.Translate> </p> </div> <div class="column" /> @@ -416,19 +424,19 @@ export function SetTokenNewInstanceModal({ onClick={onClear} disabled={onClear === undefined} > - <Translate>Set external authorization</Translate> + <i18n.Translate>Set external authorization</i18n.Translate> </button> )} <div class="buttons is-right" style={{ width: "100%" }}> <button class="button " onClick={onCancel}> - <Translate>Cancel</Translate> + <i18n.Translate>Cancel</i18n.Translate> </button> <button class="button is-info" onClick={() => onConfirm(form.new_token!)} disabled={hasErrors} > - <Translate>Set access token</Translate> + <i18n.Translate>Set access token</i18n.Translate> </button> </div> </footer> @@ -443,14 +451,14 @@ export function SetTokenNewInstanceModal({ } export function LoadingModal({ onCancel }: { onCancel: () => void }): VNode { - const i18n = useTranslator(); + const { i18n } = useTranslationContext(); return ( <div class="modal is-active"> <div class="modal-background " onClick={onCancel} /> <div class="modal-card"> <header class="modal-card-head"> <p class="modal-card-title"> - <Translate>Operation in progress...</Translate> + <i18n.Translate>Operation in progress...</i18n.Translate> </p> </header> <section class="modal-card-body"> @@ -459,12 +467,12 @@ export function LoadingModal({ onCancel }: { onCancel: () => void }): VNode { <Spinner /> <div class="column" /> </div> - <p>{i18n`The operation will be automatically canceled after ${DEFAULT_REQUEST_TIMEOUT} seconds`}</p> + <p>{i18n.str`The operation will be automatically canceled after ${DEFAULT_REQUEST_TIMEOUT} seconds`}</p> </section> <footer class="modal-card-foot"> <div class="buttons is-right" style={{ width: "100%" }}> <button class="button " onClick={onCancel}> - <Translate>Cancel</Translate> + <i18n.Translate>Cancel</i18n.Translate> </button> </div> </footer> |