diff options
author | Sebastian <sebasjm@gmail.com> | 2022-02-23 15:18:37 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-02-24 12:50:51 -0300 |
commit | 41850c9f14baa5330919c6dabf161b1aaeda7376 (patch) | |
tree | 678125e50206ca3f51a6051257a94644044f456a /packages/taler-wallet-webextension/src/wallet | |
parent | 7647d077e7d9a5581e3ce919da936bc5d22a4df2 (diff) | |
download | wallet-core-41850c9f14baa5330919c6dabf161b1aaeda7376.tar.xz |
add i18n where was missing
Diffstat (limited to 'packages/taler-wallet-webextension/src/wallet')
14 files changed, 511 insertions, 245 deletions
diff --git a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx index d4158973e..d47803212 100644 --- a/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx +++ b/packages/taler-wallet-webextension/src/wallet/AddNewActionView.tsx @@ -1,4 +1,8 @@ -import { classifyTalerUri, TalerUriType } from "@gnu-taler/taler-util"; +import { + classifyTalerUri, + TalerUriType, + Translate, +} from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { Button, ButtonSuccess, InputWithLabel } from "../components/styled"; @@ -8,20 +12,20 @@ export interface Props { onCancel: () => void; } -function buttonLabelByTalerType(type: TalerUriType): string { +function buttonLabelByTalerType(type: TalerUriType): VNode { switch (type) { case TalerUriType.TalerNotifyReserve: - return "Open reserve page"; + return <Translate>Open reserve page</Translate>; case TalerUriType.TalerPay: - return "Open pay page"; + return <Translate>Open pay page</Translate>; case TalerUriType.TalerRefund: - return "Open refund page"; + return <Translate>Open refund page</Translate>; case TalerUriType.TalerTip: - return "Open tip page"; + return <Translate>Open tip page</Translate>; case TalerUriType.TalerWithdraw: - return "Open withdraw page"; + return <Translate>Open withdraw page</Translate>; } - return ""; + return <Fragment />; } export function AddNewActionView({ onCancel }: Props): VNode { @@ -47,7 +51,9 @@ export function AddNewActionView({ onCancel }: Props): VNode { </InputWithLabel> </section> <footer> - <Button onClick={onCancel}>Back</Button> + <Button onClick={onCancel}> + <Translate>Back</Translate> + </Button> {uriType !== TalerUriType.Unknown && ( <ButtonSuccess onClick={() => { diff --git a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx index daea9e3bd..73fff6e85 100644 --- a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx @@ -14,7 +14,7 @@ TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { i18n, Timestamp } from "@gnu-taler/taler-util"; +import { i18n, Timestamp, Translate } from "@gnu-taler/taler-util"; import { ProviderInfo, ProviderPaymentPaid, @@ -71,7 +71,10 @@ export function BackupPage({ onAddProvider }: Props): VNode { } if (status.hasError) { return ( - <LoadingError title="Could not load backup providers" error={status} /> + <LoadingError + title={<Translate>Could not load backup providers</Translate>} + error={status} + /> ); } @@ -122,9 +125,11 @@ export function BackupView({ ))} {!providers.length && ( <Centered style={{ marginTop: 100 }}> - <BoldLight>No backup providers configured</BoldLight> + <BoldLight> + <Translate>No backup providers configured</Translate> + </BoldLight> <ButtonSuccess onClick={onAddProvider}> - <i18n.Translate>Add provider</i18n.Translate> + <Translate>Add provider</Translate> </ButtonSuccess> </Centered> )} @@ -135,12 +140,14 @@ export function BackupView({ <div> <ButtonPrimary onClick={onSyncAll}> {providers.length > 1 ? ( - <i18n.Translate>Sync all backups</i18n.Translate> + <Translate>Sync all backups</Translate> ) : ( - <i18n.Translate>Sync now</i18n.Translate> + <Translate>Sync now</Translate> )} </ButtonPrimary> - <ButtonSuccess onClick={onAddProvider}>Add provider</ButtonSuccess> + <ButtonSuccess onClick={onAddProvider}> + <Translate>Add provider</Translate> + </ButtonSuccess> </div> </footer> )} @@ -176,10 +183,14 @@ function BackupLayout(props: TransactionLayoutProps): VNode { </a> {dateStr && ( - <SmallText style={{ marginTop: 5 }}>Last synced: {dateStr}</SmallText> + <SmallText style={{ marginTop: 5 }}> + <Translate>Last synced</Translate>: {dateStr} + </SmallText> )} {!dateStr && ( - <SmallLightText style={{ marginTop: 5 }}>Not synced</SmallLightText> + <SmallLightText style={{ marginTop: 5 }}> + <Translate>Not synced</Translate> + </SmallLightText> )} </div> <div> @@ -196,7 +207,9 @@ function BackupLayout(props: TransactionLayoutProps): VNode { function ExpirationText({ until }: { until: Timestamp }): VNode { return ( <Fragment> - <CenteredText> Expires in </CenteredText> + <CenteredText> + <Translate>Expires in</Translate> + </CenteredText> <CenteredBoldText {...{ color: colorByTimeToExpire(until) }}> {" "} {daysUntil(until)}{" "} diff --git a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx index 0ca07816e..b0eddeda5 100644 --- a/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx +++ b/packages/taler-wallet-webextension/src/wallet/CreateManualWithdraw.tsx @@ -19,7 +19,7 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { AmountJson, Amounts, i18n } from "@gnu-taler/taler-util"; +import { AmountJson, Amounts, i18n, Translate } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { ErrorMessage } from "../components/ErrorMessage"; @@ -99,16 +99,22 @@ export function CreateManualWithdraw({ if (!initialExchange) { return ( <section> - <h2>Manual Withdrawal</h2> + <h2> + <Translate>Manual Withdrawal</Translate> + </h2> <LightText> - Choose a exchange from where the coins will be withdrawn. The exchange - will send the coins to this wallet after receiving a wire transfer - with the correct subject. + <Translate> + Choose a exchange from where the coins will be withdrawn. The + exchange will send the coins to this wallet after receiving a wire + transfer with the correct subject. + </Translate> </LightText> <Centered style={{ marginTop: 100 }}> - <BoldLight>No exchange configured</BoldLight> + <BoldLight> + <Translate>No exchange configured</Translate> + </BoldLight> <ButtonSuccess onClick={onAddExchange}> - <i18n.Translate>Add exchange</i18n.Translate> + <Translate>Add exchange</Translate> </ButtonSuccess> </Centered> </section> @@ -118,20 +124,26 @@ export function CreateManualWithdraw({ return ( <Fragment> <section> - <ErrorMessage - title={error && "Can't create the reserve"} - description={error} - /> - <h2>Manual Withdrawal</h2> + {error && ( + <ErrorMessage + title={<Translate>Can't create the reserve</Translate>} + description={error} + /> + )} + <h2> + <Translate>Manual Withdrawal</Translate> + </h2> <LightText> - Choose a exchange from where the coins will be withdrawn. The exchange - will send the coins to this wallet after receiving a wire transfer - with the correct subject. + <Translate> + Choose a exchange from where the coins will be withdrawn. The + exchange will send the coins to this wallet after receiving a wire + transfer with the correct subject. + </Translate> </LightText> <p> <Input> <SelectList - label="Currency" + label={<Translate>Currency</Translate>} list={currencyMap} name="currency" value={currency} @@ -140,7 +152,7 @@ export function CreateManualWithdraw({ </Input> <Input> <SelectList - label="Exchange" + label={<Translate>Exchange</Translate>} list={exchangeMap} name="currency" value={exchange} @@ -149,12 +161,14 @@ export function CreateManualWithdraw({ </Input> <div style={{ display: "flex", justifyContent: "space-between" }}> <LinkPrimary onClick={onAddExchange} style={{ marginLeft: "auto" }}> - <i18n.Translate>Add exchange</i18n.Translate> + <Translate>Add Exchange</Translate> </LinkPrimary> </div> {currency && ( <InputWithLabel invalid={!!amount && !parsedAmount}> - <label>Amount</label> + <label> + <Translate>Amount</Translate> + </label> <div> <span>{currency}</span> <input @@ -173,7 +187,7 @@ export function CreateManualWithdraw({ disabled={!parsedAmount || !exchange} onClick={() => onCreate(exchange, parsedAmount!)} > - Start withdrawal + <Translate>Start withdrawal</Translate> </ButtonPrimary> </footer> </Fragment> diff --git a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx index abe830e87..7a5e02d3b 100644 --- a/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/DepositPage.tsx @@ -19,6 +19,7 @@ import { Amounts, AmountString, PaytoUri, + Translate, } from "@gnu-taler/taler-util"; import { DepositFee } from "@gnu-taler/taler-wallet-core/src/operations/deposits"; import { Fragment, h, VNode } from "preact"; @@ -132,13 +133,21 @@ export function View({ }, [amount]); if (!balance) { - return <div>no balance</div>; + return ( + <div> + <Translate>no balance</Translate> + </div> + ); } if (!knownBankAccounts || !knownBankAccounts.length) { return ( <WarningBox> - <p>There is no known bank account to send money to</p> - <ButtonBoxWarning>Withdraw</ButtonBoxWarning> + <p> + <Translate>There is no known bank account to send money to</Translate> + </p> + <ButtonBoxWarning> + <Translate>Withdraw</Translate> + </ButtonBoxWarning> </WarningBox> ); } @@ -162,11 +171,13 @@ export function View({ return ( <Fragment> - <h2>Send {currency} to your account</h2> + <h2> + <Translate>Send {currency} to your account</Translate> + </h2> <section> <Input> <SelectList - label="Bank account IBAN number" + label={<Translate>Bank account IBAN number</Translate>} list={accountMap} name="account" value={String(accountIdx)} @@ -174,7 +185,9 @@ export function View({ /> </Input> <InputWithLabel invalid={!!error}> - <label>Amount</label> + <label> + <Translate>Amount</Translate> + </label> <div> <span>{currency}</span> <input @@ -196,7 +209,9 @@ export function View({ { <Fragment> <InputWithLabel> - <label>Deposit fee</label> + <label> + <Translate>Deposit fee</Translate> + </label> <div> <span>{currency}</span> <input @@ -208,7 +223,9 @@ export function View({ </InputWithLabel> <InputWithLabel> - <label>Total deposit</label> + <label> + <Translate>Total deposit</Translate> + </label> <div> <span>{currency}</span> <input @@ -224,10 +241,14 @@ export function View({ <footer> <div /> {unableToDeposit ? ( - <ButtonPrimary disabled>Deposit</ButtonPrimary> + <ButtonPrimary disabled> + <Translate>Deposit</Translate> + </ButtonPrimary> ) : ( <ButtonPrimary onClick={() => onSend(accountURI, amountStr)}> - Deposit {Amounts.stringifyValue(totalToDeposit)} {currency} + <Translate> + Deposit {Amounts.stringifyValue(totalToDeposit)} {currency} + </Translate> </ButtonPrimary> )} </footer> diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx index 562a2c956..06d8abd2b 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeAddConfirm.tsx @@ -1,4 +1,4 @@ -import { i18n } from "@gnu-taler/taler-util"; +import { i18n, Translate } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; import { Button, ButtonSuccess, ButtonWarning } from "../components/styled"; @@ -84,9 +84,11 @@ export function View({ return ( <Fragment> <section> - <h1>Review terms of service</h1> + <h1> + <Translate>Review terms of service</Translate> + </h1> <div> - Exchange URL: + <Translate>Exchange URL</Translate>: <a href={url} target="_blank" rel="noreferrer"> {url} </a> @@ -107,28 +109,28 @@ export function View({ <footer> <Button onClick={onCancel}> - <i18n.Translate>Cancel</i18n.Translate> + <Translate>Cancel</Translate> </Button> {!terms && ( <Button disabled> - <i18n.Translate>Loading terms..</i18n.Translate> + <Translate>Loading terms..</Translate> </Button> )} {terms && ( <Fragment> {needsReview && !reviewed && ( <ButtonSuccess disabled upperCased onClick={onConfirm}> - {i18n.str`Add exchange`} + <Translate>Add exchange</Translate> </ButtonSuccess> )} {(terms.status === "accepted" || (needsReview && reviewed)) && ( <ButtonSuccess upperCased onClick={onConfirm}> - {i18n.str`Add exchange`} + <Translate>Add exchange</Translate> </ButtonSuccess> )} {terms.status === "notfound" && ( <ButtonWarning upperCased onClick={onConfirm}> - {i18n.str`Add exchange anyway`} + <Translate>Add exchange anyway</Translate> </ButtonWarning> )} </Fragment> diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx index c4ba4f2a3..909afc4b7 100644 --- a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx @@ -2,6 +2,7 @@ import { canonicalizeBaseUrl, i18n, TalerConfigResponse, + Translate, } from "@gnu-taler/taler-util"; import { Fragment, h } from "preact"; import { useEffect, useState } from "preact/hooks"; @@ -91,32 +92,46 @@ export function ExchangeSetUrlPage({ <Fragment> <section> {!expectedCurrency ? ( - <h1>Add new exchange</h1> + <h1> + <Translate>Add new exchange</Translate> + </h1> ) : ( - <h2>Add exchange for {expectedCurrency}</h2> + <h2> + <Translate>Add exchange for {expectedCurrency}</Translate> + </h2> )} {!result && ( - <LightText>Enter the URL of an exchange you trust.</LightText> + <LightText> + <Translate>Enter the URL of an exchange you trust.</Translate> + </LightText> )} {result && ( <LightText> - An exchange has been found! Review the information and click next + <Translate> + An exchange has been found! Review the information and click next + </Translate> </LightText> )} {result && expectedCurrency && expectedCurrency !== result.currency && ( <WarningBox> - This exchange doesn't match the expected currency{" "} - <b>{expectedCurrency}</b> + <Translate> + This exchange doesn't match the expected currency + <b>{expectedCurrency}</b> + </Translate> </WarningBox> )} - <ErrorMessage - title={error && "Unable to add this exchange"} - description={error} - /> - <ErrorMessage - title={confirmationError && "Unable to add this exchange"} - description={confirmationError} - /> + {error && ( + <ErrorMessage + title={<Translate>Unable to verify this exchange</Translate>} + description={error} + /> + )} + {confirmationError && ( + <ErrorMessage + title={<Translate>Unable to add this exchange</Translate>} + description={confirmationError} + /> + )} <p> <Input invalid={!!error}> <label>URL</label> @@ -127,15 +142,23 @@ export function ExchangeSetUrlPage({ onInput={(e) => updateEndpoint(e.currentTarget.value)} /> </Input> - {loading && <div>loading... </div>} + {loading && ( + <div> + <Translate>loading</Translate>... + </div> + )} {result && !loading && ( <Fragment> <Input> - <label>Version</label> + <label> + <Translate>Version</Translate> + </label> <input type="text" disabled value={result.version} /> </Input> <Input> - <label>Currency</label> + <label> + <Translate>Currency</Translate> + </label> <input type="text" disabled value={result.currency} /> </Input> </Fragment> @@ -144,7 +167,7 @@ export function ExchangeSetUrlPage({ </section> <footer> <Button onClick={onCancel}> - <i18n.Translate>Cancel</i18n.Translate> + <Translate>Cancel</Translate> </Button> <ButtonPrimary disabled={ @@ -160,7 +183,7 @@ export function ExchangeSetUrlPage({ ); }} > - <i18n.Translate>Next</i18n.Translate> + <Translate>Next</Translate> </ButtonPrimary> </footer> </Fragment> diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx index 2fae07525..a3e8ecc67 100644 --- a/packages/taler-wallet-webextension/src/wallet/History.tsx +++ b/packages/taler-wallet-webextension/src/wallet/History.tsx @@ -19,6 +19,7 @@ import { Balance, NotificationType, Transaction, + Translate, } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; @@ -66,7 +67,7 @@ export function HistoryPage({ if (transactionQuery.hasError) { return ( <LoadingError - title="Could not load the list of transactions" + title={<Translate>Could not load the list of transactions</Translate>} error={transactionQuery} /> ); @@ -193,21 +194,23 @@ export function HistoryView({ style={{ marginLeft: 0, marginTop: 8 }} onClick={() => goToWalletManualWithdraw(selectedCurrency)} > - Withdraw + <Translate>Withdraw</Translate> </ButtonPrimary> {currencyAmount && Amounts.isNonZero(currencyAmount) && ( <ButtonBoxPrimary style={{ marginLeft: 0, marginTop: 8 }} onClick={() => goToWalletDeposit(selectedCurrency)} > - Deposit + <Translate>Deposit</Translate> </ButtonBoxPrimary> )} </div> </div> </section> {datesWithTransaction.length === 0 ? ( - <section>There is no history for this currency</section> + <section> + <Translate>There is no history for this currency</Translate> + </section> ) : ( <section> {datesWithTransaction.map((d, i) => { diff --git a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx index 1f8603794..8eca733d4 100644 --- a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx @@ -19,6 +19,7 @@ import { AmountJson, Amounts, NotificationType, + Translate, } from "@gnu-taler/taler-util"; import { h, VNode } from "preact"; import { useState } from "preact/hooks"; @@ -95,7 +96,9 @@ export function ManualWithdrawPage({ currency, onCancel }: Props): VNode { if (state.hasError) { return ( <LoadingError - title="Could not load the list of known exchanges" + title={ + <Translate>Could not load the list of known exchanges</Translate> + } error={state} /> ); diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx index 44d1049b9..55e2b62fb 100644 --- a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx @@ -19,6 +19,7 @@ import { BackupBackupProviderTerms, canonicalizeBaseUrl, i18n, + Translate, } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { useEffect, useState } from "preact/hooks"; @@ -113,15 +114,23 @@ export function SetUrlView({ return ( <Fragment> <section> - <h1> Add backup provider</h1> - <ErrorMessage - title={error && "Could not get provider information"} - description={error} - /> - <LightText> Backup providers may charge for their service</LightText> + <h1> + <Translate>Add backup provider</Translate> + </h1> + {error && ( + <ErrorMessage + title={<Translate>Could not get provider information</Translate>} + description={error} + /> + )} + <LightText> + <Translate>Backup providers may charge for their service</Translate> + </LightText> <p> <Input invalid={urlError}> - <label>URL</label> + <label> + <Translate>URL</Translate> + </label> <input type="text" placeholder="https://" @@ -130,7 +139,9 @@ export function SetUrlView({ /> </Input> <Input> - <label>Name</label> + <label> + <Translate>Name</Translate> + </label> <input type="text" disabled={name === undefined} @@ -142,7 +153,7 @@ export function SetUrlView({ </section> <footer> <Button onClick={onCancel}> - <i18n.Translate> < Back</i18n.Translate> + < <Translate>Back</Translate> </Button> <ButtonPrimary disabled={!value && !urlError} @@ -153,7 +164,7 @@ export function SetUrlView({ ); }} > - <i18n.Translate>Next</i18n.Translate> + <Translate>Next</Translate> </ButtonPrimary> </footer> </Fragment> @@ -177,29 +188,41 @@ export function ConfirmProviderView({ return ( <Fragment> <section> - <h1>Review terms of service</h1> + <h1> + <Translate>Review terms of service</Translate> + </h1> <div> - Provider URL:{" "} + <Translate>Provider URL</Translate>:{" "} <a href={url} target="_blank"> {url} </a> </div> <SmallLightText> - Please review and accept this provider's terms of service + <Translate> + Please review and accept this provider's terms of service + </Translate> </SmallLightText> - <h2>1. Pricing</h2> + <h2> + 1. <Translate>Pricing</Translate> + </h2> <p> - {Amounts.isZero(provider.annual_fee) - ? "free of charge" - : `${provider.annual_fee} per year of service`} + {Amounts.isZero(provider.annual_fee) ? ( + <Translate>free of charge</Translate> + ) : ( + <Translate>{provider.annual_fee} per year of service</Translate> + )} </p> - <h2>2. Storage</h2> + <h2> + 2. <Translate>Storage</Translate> + </h2> <p> - {provider.storage_limit_in_megabytes} megabytes of storage per year of - service + <Translate> + {provider.storage_limit_in_megabytes} megabytes of storage per year + of service + </Translate> </p> <Checkbox - label="Accept terms of service" + label={<Translate>Accept terms of service</Translate>} name="terms" onToggle={() => setAccepted((old) => !old)} enabled={accepted} @@ -207,10 +230,10 @@ export function ConfirmProviderView({ </section> <footer> <Button onClick={onCancel}> - <i18n.Translate> < Back</i18n.Translate> + < <Translate>Back</Translate> </Button> <ButtonPrimary disabled={!accepted} onClick={onConfirm}> - <i18n.Translate>Add provider</i18n.Translate> + <Translate>Add provider</Translate> </ButtonPrimary> </footer> </Fragment> diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx index 239a7b31d..beeedcda7 100644 --- a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx @@ -14,7 +14,7 @@ TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { i18n } from "@gnu-taler/taler-util"; +import { Translate } from "@gnu-taler/taler-util"; import { ProviderInfo, ProviderPaymentStatus, @@ -22,6 +22,8 @@ import { } from "@gnu-taler/taler-wallet-core"; import { Fragment, h, VNode } from "preact"; import { ErrorMessage } from "../components/ErrorMessage"; +import { Loading } from "../components/Loading"; +import { LoadingError } from "../components/LoadingError"; import { Button, ButtonDestructive, @@ -52,35 +54,24 @@ export function ProviderDetailPage({ pid: providerURL, onBack }: Props): VNode { const state = useAsyncAsHook(getProviderInfo); if (!state) { - return ( - <div> - <i18n.Translate>Loading...</i18n.Translate> - </div> - ); + return <Loading />; } if (state.hasError) { return ( - <div> - <i18n.Translate> - There was an error loading the provider detail for "{providerURL}" - </i18n.Translate> - </div> + <LoadingError + title={ + <Translate> + There was an error loading the provider detail for "{providerURL}" + </Translate> + } + error={state} + /> ); } - if (state.response === null) { - onBack(); - return ( - <div> - <i18n.Translate> - There is not known provider with url "{providerURL}". Redirecting - back... - </i18n.Translate> - </div> - ); - } return ( <ProviderView + url={providerURL} info={state.response} onSync={async () => wxApi.syncOneProvider(providerURL)} onDelete={async () => wxApi.removeProvider(providerURL).then(onBack)} @@ -93,7 +84,8 @@ export function ProviderDetailPage({ pid: providerURL, onBack }: Props): VNode { } export interface ViewProps { - info: ProviderInfo; + url: string; + info: ProviderInfo | null; onDelete: () => void; onSync: () => void; onBack: () => void; @@ -102,12 +94,30 @@ export interface ViewProps { export function ProviderView({ info, + url, onDelete, onSync, onBack, onExtend, }: ViewProps): VNode { - const lb = info?.lastSuccessfulBackupTimestamp; + if (info === null) { + return ( + <Fragment> + <section> + <p> + <Translate>There is not known provider with url "{url}".</Translate> + </p> + </section> + <footer> + <Button onClick={onBack}> + < <Translate>Back</Translate> + </Button> + <div /> + </footer> + </Fragment> + ); + } + const lb = info.lastSuccessfulBackupTimestamp; const isPaid = info.paymentStatus.type === ProviderPaymentType.Paid || info.paymentStatus.type === ProviderPaymentType.TermsChanged; @@ -125,48 +135,55 @@ export function ProviderView({ </header> <section> <p> - <b>Last backup:</b> <Time timestamp={lb} format="dd MMMM yyyy" /> + <b> + <Translate>Last backup</Translate>: + </b>{" "} + <Time timestamp={lb} format="dd MMMM yyyy" /> </p> <ButtonPrimary onClick={onSync}> - <i18n.Translate>Back up</i18n.Translate> + <Translate>Back up</Translate> </ButtonPrimary> {info.terms && ( <Fragment> <p> - <b>Provider fee:</b> {info.terms && info.terms.annualFee} per year + <b> + <Translate>Provider fee</Translate>: + </b>{" "} + {info.terms && info.terms.annualFee}{" "} + <Translate>per year</Translate> </p> </Fragment> )} <p>{descriptionByStatus(info.paymentStatus)}</p> <ButtonPrimary disabled onClick={onExtend}> - <i18n.Translate>Extend</i18n.Translate> + <Translate>Extend</Translate> </ButtonPrimary> {info.paymentStatus.type === ProviderPaymentType.TermsChanged && ( <div> <p> - <i18n.Translate> + <Translate> terms has changed, extending the service will imply accepting the new terms of service - </i18n.Translate> + </Translate> </p> <table> <thead> <tr> <td> </td> <td> - <i18n.Translate>old</i18n.Translate> + <Translate>old</Translate> </td> <td> -></td> <td> - <i18n.Translate>new</i18n.Translate> + <Translate>new</Translate> </td> </tr> </thead> <tbody> <tr> <td> - <i18n.Translate>fee</i18n.Translate> + <Translate>fee</Translate> </td> <td>{info.paymentStatus.oldTerms.annualFee}</td> <td>-></td> @@ -174,7 +191,7 @@ export function ProviderView({ </tr> <tr> <td> - <i18n.Translate>storage</i18n.Translate> + <Translate>storage</Translate> </td> <td>{info.paymentStatus.oldTerms.storageLimitInMegabytes}</td> <td>-></td> @@ -187,11 +204,11 @@ export function ProviderView({ </section> <footer> <Button onClick={onBack}> - <i18n.Translate> < back</i18n.Translate> + < <Translate>back</Translate> </Button> <div> <ButtonDestructive onClick={onDelete}> - <i18n.Translate>remove provider</i18n.Translate> + <Translate>Remove provider</Translate> </ButtonDestructive> </div> </footer> @@ -201,7 +218,12 @@ export function ProviderView({ function Error({ info }: { info: ProviderInfo }): VNode { if (info.lastError) { - return <ErrorMessage title={info.lastError.hint} />; + return ( + <ErrorMessage + title={<Translate>This provider has reported an error</Translate>} + description={info.lastError.hint} + /> + ); } if (info.backupProblem) { switch (info.backupProblem.type) { @@ -210,24 +232,26 @@ function Error({ info }: { info: ProviderInfo }): VNode { <ErrorMessage title={ <Fragment> - <i18n.Translate> + <Translate> There is conflict with another backup from{" "} <b>{info.backupProblem.otherDeviceId}</b> - </i18n.Translate> + </Translate> </Fragment> } /> ); case "backup-unreadable": - return <ErrorMessage title="Backup is not readable" />; + return ( + <ErrorMessage title={<Translate>Backup is not readable</Translate>} /> + ); default: return ( <ErrorMessage title={ <Fragment> - <i18n.Translate> + <Translate> Unknown backup problem: {JSON.stringify(info.backupProblem)} - </i18n.Translate> + </Translate> </Fragment> } /> @@ -239,16 +263,20 @@ function Error({ info }: { info: ProviderInfo }): VNode { function descriptionByStatus(status: ProviderPaymentStatus): VNode { switch (status.type) { - // return i18n.str`no enough balance to make the payment` - // return i18n.str`not paid yet` case ProviderPaymentType.Paid: case ProviderPaymentType.TermsChanged: if (status.paidUntil.t_ms === "never") { - return <span>{i18n.str`service paid`}</span>; + return ( + <span> + <Translate>service paid</Translate> + </span> + ); } return ( <Fragment> - <b>Backup valid until:</b>{" "} + <b> + <Translate>Backup valid until</Translate>: + </b>{" "} <Time timestamp={status.paidUntil} format="dd MMM yyyy" /> </Fragment> ); diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx index 7ccef2daa..7de719fc6 100644 --- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx +++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx @@ -1,4 +1,9 @@ -import { AmountJson, Amounts, parsePaytoUri } from "@gnu-taler/taler-util"; +import { + AmountJson, + Amounts, + parsePaytoUri, + Translate, +} from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { BankDetailsByPaytoType } from "../components/BankDetailsByPaytoType"; import { QR } from "../components/QR"; @@ -22,15 +27,23 @@ export function ReserveCreated({ const paytoURI = parsePaytoUri(payto); // const url = new URL(paytoURI?.targetPath); if (!paytoURI) { - return <div>could not parse payto uri from exchange {payto}</div>; + return ( + <div> + <Translate>could not parse payto uri from exchange {payto}</Translate> + </div> + ); } return ( <Fragment> <section> - <h1>Exchange is ready for withdrawal!</h1> + <h1> + <Translate>Exchange is ready for withdrawal</Translate> + </h1> <p> - To complete the process you need to wire{" "} - <b>{amountToString(amount)}</b> to the exchange bank account + <Translate> + To complete the process you need to wire + <b>{amountToString(amount)}</b> to the exchange bank account + </Translate> </p> <BankDetailsByPaytoType amount={amountToString(amount)} @@ -40,23 +53,27 @@ export function ReserveCreated({ /> <p> <WarningBox> - Make sure to use the correct subject, otherwise the money will not - arrive in this wallet. + <Translate> + Make sure to use the correct subject, otherwise the money will not + arrive in this wallet. + </Translate> </WarningBox> </p> </section> <section> <p> - Alternative, you can also scan this QR code or open{" "} - <a href={payto}>this link</a> if you have a banking app installed that - supports RFC 8905 + <Translate> + Alternative, you can also scan this QR code or open + <a href={payto}>this link</a> if you have a banking app installed + that supports RFC 8905 + </Translate> </p> <QR text={payto} /> </section> <footer> <div /> <ButtonDestructive onClick={onCancel}> - Cancel withdrawal + <Translate>Cancel withdrawal</Translate> </ButtonDestructive> </footer> </Fragment> diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.tsx index ff47620eb..bac884247 100644 --- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx @@ -14,7 +14,7 @@ TALER; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ -import { ExchangeListItem, i18n } from "@gnu-taler/taler-util"; +import { ExchangeListItem, i18n, Translate } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { Checkbox } from "../components/Checkbox"; import { @@ -81,29 +81,46 @@ export function SettingsView({ <Fragment> <section> <h2> - <i18n.Translate>Permissions</i18n.Translate> + <Translate>Permissions</Translate> </h2> <Checkbox - label="Automatically open wallet based on page content" + label={ + <Translate> + Automatically open wallet based on page content + </Translate> + } name="perm" - description="(Enabling this option below will make using the wallet faster, but requires more permissions from your browser.)" + description={ + <Translate> + Enabling this option below will make using the wallet faster, but + requires more permissions from your browser. + </Translate> + } enabled={permissionsEnabled} onToggle={togglePermissions} /> <h2> - <i18n.Translate>Known exchanges</i18n.Translate> + <Translate>Known exchanges</Translate> </h2> {!knownExchanges || !knownExchanges.length ? ( - <div>No exchange yet!</div> + <div> + <Translate>No exchange yet</Translate> + </div> ) : ( <Fragment> <table> <thead> <tr> - <th>currency</th> - <th>url</th> - <th>term of service</th> + <th> + <Translate>Currency</Translate> + </th> + <th> + <Translate>URL</Translate> + </th> + <th> + <Translate>Term of Service</Translate> + </th> </tr> </thead> <tbody> @@ -116,12 +133,24 @@ export function SettingsView({ ); switch (status) { case "accepted": - return <SuccessText>ok</SuccessText>; + return ( + <SuccessText> + <Translate>ok</Translate> + </SuccessText> + ); case "changed": - return <WarningText>changed!</WarningText>; + return ( + <WarningText> + <Translate>changed</Translate> + </WarningText> + ); case "new": case "notfound": - return <DestructiveText>not accepted</DestructiveText>; + return ( + <DestructiveText> + <Translate>not accepted</Translate> + </DestructiveText> + ); } } return ( @@ -143,15 +172,19 @@ export function SettingsView({ <div style={{ display: "flex", justifyContent: "space-between" }}> <div /> <LinkPrimary href={Pages.settings_exchange_add}> - Add an exchange + <Translate>Add an exchange</Translate> </LinkPrimary> </div> <h2>Config</h2> <Checkbox - label="Developer mode" + label={<Translate>Developer mode</Translate>} name="devMode" - description="(More options and information useful for debugging)" + description={ + <Translate> + (More options and information useful for debugging) + </Translate> + } enabled={developerMode} onToggle={toggleDeveloperMode} /> diff --git a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx index 423a641a3..a43e9b4a0 100644 --- a/packages/taler-wallet-webextension/src/wallet/Transaction.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Transaction.tsx @@ -22,6 +22,7 @@ import { parsePaytoUri, Transaction, TransactionType, + Translate, WithdrawalType, } from "@gnu-taler/taler-util"; import { differenceInSeconds } from "date-fns"; @@ -47,7 +48,6 @@ import { } from "../components/styled"; import { Time } from "../components/Time"; import { useAsyncAsHook } from "../hooks/useAsyncAsHook"; -import { Pages } from "../NavigationBar"; import * as wxApi from "../wxApi"; interface Props { @@ -76,7 +76,9 @@ export function TransactionPage({ tid, goToWalletHistory }: Props): VNode { if (state.hasError) { return ( <LoadingError - title="Could not load the transaction information" + title={ + <Translate>Could not load the transaction information</Translate> + } error={state} /> ); @@ -139,11 +141,17 @@ export function TransactionView({ <Fragment> <section style={{ padding: 8, textAlign: "center" }}> <ErrorTalerOperation - title="There was an error trying to complete the transaction" + title={ + <Translate> + There was an error trying to complete the transaction + </Translate> + } error={transaction?.error} /> {transaction.pending && ( - <WarningBox>This transaction is not completed</WarningBox> + <WarningBox> + <Translate>This transaction is not completed</Translate> + </WarningBox> )} </section> <section> @@ -151,16 +159,16 @@ export function TransactionView({ </section> <footer> <Button onClick={onBack}> - <i18n.Translate> < Back </i18n.Translate> + < <Translate> Back </Translate> </Button> <div> {showRetry ? ( <ButtonPrimary onClick={onRetry}> - <i18n.Translate>retry</i18n.Translate> + <Translate>Retry</Translate> </ButtonPrimary> ) : null} <ButtonDestructive onClick={doCheckBeforeForget}> - <i18n.Translate> Forget </i18n.Translate> + <Translate>Forget</Translate> </ButtonDestructive> </div> </footer> @@ -184,24 +192,30 @@ export function TransactionView({ {confirmBeforeForget ? ( <Overlay> <CenteredDialog> - <header>Caution!</header> + <header> + <Translate>Caution!</Translate> + </header> <section> - If you have already wired money to the exchange you will loose - the chance to get the coins form it. + <Translate> + If you have already wired money to the exchange you will loose + the chance to get the coins form it. + </Translate> </section> <footer> <Button onClick={() => setConfirmBeforeForget(false)}> - <i18n.Translate> Cancel </i18n.Translate> + <Translate>Cancel</Translate> </Button> <ButtonDestructive onClick={onDelete}> - <i18n.Translate> Confirm </i18n.Translate> + <Translate>Confirm</Translate> </ButtonDestructive> </footer> </CenteredDialog> </Overlay> ) : undefined} - <h2>Withdrawal</h2> + <h2> + <Translate>Withdrawal</Translate> + </h2> <Time timestamp={transaction.timestamp} format="dd MMMM yyyy, HH:mm" /> {transaction.pending ? ( transaction.withdrawalDetails.type === @@ -217,19 +231,21 @@ export function TransactionView({ /> <p> <WarningBox> - Make sure to use the correct subject, otherwise the money will - not arrive in this wallet. + <Translate> + Make sure to use the correct subject, otherwise the money + will not arrive in this wallet. + </Translate> </WarningBox> </p> <Part big - title="Total withdrawn" + title={<Translate>Total withdrawn</Translate>} text={amountToString(transaction.amountEffective)} kind="positive" /> <Part big - title="Exchange fee" + title={<Translate>Exchange fee</Translate>} text={amountToString(fee)} kind="negative" /> @@ -239,34 +255,38 @@ export function TransactionView({ {!transaction.withdrawalDetails.confirmed && transaction.withdrawalDetails.bankConfirmationUrl ? ( <InfoBox> - The bank is waiting for confirmation. Go to the - <a - href={transaction.withdrawalDetails.bankConfirmationUrl} - target="_blank" - rel="noreferrer" - > - bank site - </a> + <Translate> + The bank is waiting for confirmation. Go to the + <a + href={transaction.withdrawalDetails.bankConfirmationUrl} + target="_blank" + rel="noreferrer" + > + <Translate>bank site</Translate> + </a> + </Translate> </InfoBox> ) : undefined} {transaction.withdrawalDetails.confirmed && ( - <InfoBox>Waiting for the coins to arrive</InfoBox> + <InfoBox> + <Translate>Waiting for the coins to arrive</Translate> + </InfoBox> )} <Part big - title="Total withdrawn" + title={<Translate>Total withdrawn</Translate>} text={amountToString(transaction.amountEffective)} kind="positive" /> <Part big - title="Chosen amount" + title={<Translate>Chosen amount</Translate>} text={amountToString(transaction.amountRaw)} kind="neutral" /> <Part big - title="Exchange fee" + title={<Translate>Exchange fee</Translate>} text={amountToString(fee)} kind="negative" /> @@ -276,26 +296,26 @@ export function TransactionView({ <Fragment> <Part big - title="Total withdrawn" + title={<Translate>Total withdrawn</Translate>} text={amountToString(transaction.amountEffective)} kind="positive" /> <Part big - title="Chosen amount" + title={<Translate>Chosen amount</Translate>} text={amountToString(transaction.amountRaw)} kind="neutral" /> <Part big - title="Exchange fee" + title={<Translate>Exchange fee</Translate>} text={amountToString(fee)} kind="negative" /> </Fragment> )} <Part - title="Exchange" + title={<Translate>Exchange</Translate>} text={new URL(transaction.exchangeBaseUrl).hostname} kind="neutral" /> @@ -315,30 +335,41 @@ export function TransactionView({ return ( <TransactionTemplate> - <h2>Payment </h2> + <h2> + <Translate>Payment</Translate> + </h2> <Time timestamp={transaction.timestamp} format="dd MMMM yyyy, HH:mm" /> <br /> <Part big - title="Total paid" + title={<Translate>Total paid</Translate>} text={amountToString(transaction.amountEffective)} kind="negative" /> <Part big - title="Purchase amount" + title={<Translate>Purchase amount</Translate>} text={amountToString(transaction.amountRaw)} kind="neutral" /> - <Part big title="Fee" text={amountToString(fee)} kind="negative" /> <Part - title="Merchant" + big + title={<Translate>Fee</Translate>} + text={amountToString(fee)} + kind="negative" + /> + <Part + title={<Translate>Merchant</Translate>} text={transaction.info.merchant.name} kind="neutral" /> - <Part title="Purchase" text={transaction.info.summary} kind="neutral" /> <Part - title="Receipt" + title={<Translate>Purchase</Translate>} + text={transaction.info.summary} + kind="neutral" + /> + <Part + title={<Translate>Receipt</Translate>} text={`#${transaction.info.orderId}`} kind="neutral" /> @@ -375,22 +406,29 @@ export function TransactionView({ ).amount; return ( <TransactionTemplate> - <h2>Deposit </h2> + <h2> + <Translate>Deposit</Translate> + </h2> <Time timestamp={transaction.timestamp} format="dd MMMM yyyy, HH:mm" /> <br /> <Part big - title="Total send" + title={<Translate>Total send</Translate>} text={amountToString(transaction.amountEffective)} kind="neutral" /> <Part big - title="Deposit amount" + title={<Translate>Deposit amount</Translate>} text={amountToString(transaction.amountRaw)} kind="positive" /> - <Part big title="Fee" text={amountToString(fee)} kind="negative" /> + <Part + big + title={<Translate>Fee</Translate>} + text={amountToString(fee)} + kind="negative" + /> </TransactionTemplate> ); } @@ -402,22 +440,29 @@ export function TransactionView({ ).amount; return ( <TransactionTemplate> - <h2>Refresh</h2> + <h2> + <Translate>Refresh</Translate> + </h2> <Time timestamp={transaction.timestamp} format="dd MMMM yyyy, HH:mm" /> <br /> <Part big - title="Total refresh" + title={<Translate>Total refresh</Translate>} text={amountToString(transaction.amountEffective)} kind="negative" /> <Part big - title="Refresh amount" + title={<Translate>Refresh amount</Translate>} text={amountToString(transaction.amountRaw)} kind="neutral" /> - <Part big title="Fee" text={amountToString(fee)} kind="negative" /> + <Part + big + title={<Translate>Fee</Translate>} + text={amountToString(fee)} + kind="negative" + /> </TransactionTemplate> ); } @@ -429,22 +474,29 @@ export function TransactionView({ ).amount; return ( <TransactionTemplate> - <h2>Tip</h2> + <h2> + <Translate>Tip</Translate> + </h2> <Time timestamp={transaction.timestamp} format="dd MMMM yyyy, HH:mm" /> <br /> <Part big - title="Total tip" + title={<Translate>Total tip</Translate>} text={amountToString(transaction.amountEffective)} kind="positive" /> <Part big - title="Received amount" + title={<Translate>Received amount</Translate>} text={amountToString(transaction.amountRaw)} kind="neutral" /> - <Part big title="Fee" text={amountToString(fee)} kind="negative" /> + <Part + big + title={<Translate>Fee</Translate>} + text={amountToString(fee)} + kind="negative" + /> </TransactionTemplate> ); } @@ -456,30 +508,41 @@ export function TransactionView({ ).amount; return ( <TransactionTemplate> - <h2>Refund</h2> + <h2> + <Translate>Refund</Translate> + </h2> <Time timestamp={transaction.timestamp} format="dd MMMM yyyy, HH:mm" /> <br /> <Part big - title="Total refund" + title={<Translate>Total refund</Translate>} text={amountToString(transaction.amountEffective)} kind="positive" /> <Part big - title="Refund amount" + title={<Translate>Refund amount</Translate>} text={amountToString(transaction.amountRaw)} kind="neutral" /> - <Part big title="Fee" text={amountToString(fee)} kind="negative" /> <Part - title="Merchant" + big + title={<Translate>Fee</Translate>} + text={amountToString(fee)} + kind="negative" + /> + <Part + title={<Translate>Merchant</Translate>} text={transaction.info.merchant.name} kind="neutral" /> - <Part title="Purchase" text={transaction.info.summary} kind="neutral" /> <Part - title="Receipt" + title={<Translate>Purchase</Translate>} + text={transaction.info.summary} + kind="neutral" + /> + <Part + title={<Translate>Receipt</Translate>} text={`#${transaction.info.orderId}`} kind="neutral" /> diff --git a/packages/taler-wallet-webextension/src/wallet/Welcome.tsx b/packages/taler-wallet-webextension/src/wallet/Welcome.tsx index b180fdd05..a251c4254 100644 --- a/packages/taler-wallet-webextension/src/wallet/Welcome.tsx +++ b/packages/taler-wallet-webextension/src/wallet/Welcome.tsx @@ -17,10 +17,10 @@ /** * Welcome page, shown on first installs. * - * @author Florian Dold + * @author sebasjm */ -import { WalletDiagnostics } from "@gnu-taler/taler-util"; +import { Translate, WalletDiagnostics } from "@gnu-taler/taler-util"; import { Fragment, h, VNode } from "preact"; import { Checkbox } from "../components/Checkbox"; import { Diagnostics } from "../components/Diagnostics"; @@ -54,24 +54,41 @@ export function View({ }: ViewProps): VNode { return ( <Fragment> - <h1>Browser Extension Installed!</h1> + <h1> + <Translate>Browser Extension Installed!</Translate> + </h1> <div> - <p>Thank you for installing the wallet.</p> + <p> + <Translate>Thank you for installing the wallet.</Translate> + </p> <Diagnostics diagnostics={diagnostics} timedOut={timedOut} /> - <h2>Permissions</h2> + <h2> + <Translate>Permissions</Translate> + </h2> <Checkbox - label="Automatically open wallet based on page content" + label={ + <Translate> + Automatically open wallet based on page content + </Translate> + } name="perm" - description="(Enabling this option below will make using the wallet faster, but requires more permissions from your browser.)" + description={ + <Translate> + (Enabling this option below will make using the wallet faster, but + requires more permissions from your browser.) + </Translate> + } enabled={permissionsEnabled} onToggle={togglePermissions} /> - <h2>Next Steps</h2> + <h2> + <Translate>Next Steps</Translate> + </h2> <a href="https://demo.taler.net/" style={{ display: "block" }}> - Try the demo » + <Translate>Try the demo</Translate> » </a> <a href="https://demo.taler.net/" style={{ display: "block" }}> - Learn how to top up your wallet balance » + <Translate>Learn how to top up your wallet balance</Translate> » </a> </div> </Fragment> |