diff options
author | Sebastian <sebasjm@gmail.com> | 2021-07-26 11:27:56 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-07-26 11:33:49 -0300 |
commit | 44551245dab36570d937affdb89735c937b4ae55 (patch) | |
tree | fca0e201ce8157122af15abb9aebd1061a773b92 /packages/taler-wallet-webextension/src/popup | |
parent | e70e664da982baf1b74e6210adaa870c298281d4 (diff) | |
download | wallet-core-44551245dab36570d937affdb89735c937b4ae55.tar.xz |
i18n
Diffstat (limited to 'packages/taler-wallet-webextension/src/popup')
3 files changed, 54 insertions, 24 deletions
diff --git a/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx b/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx index 0b76d7560..30512d227 100644 --- a/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx +++ b/packages/taler-wallet-webextension/src/popup/ProviderDetailPage.tsx @@ -31,7 +31,7 @@ interface Props { export function ProviderDetailPage({ pid, onBack }: Props): VNode { const status = useProviderStatus(pid) if (!status) { - return <div>Loading...</div> + return <div><i18n.Translate>Loading...</i18n.Translate></div> } if (!status.info) { onBack() @@ -67,26 +67,26 @@ export function ProviderView({ info, onDelete, onSync, onBack, onExtend }: ViewP <p>{daysSince(info?.lastSuccessfulBackupTimestamp)} </p> <p>{descriptionByStatus(info.paymentStatus)}</p> {info.paymentStatus.type === ProviderPaymentType.TermsChanged && <div> - <p>terms has changed, extending the service will imply accepting the new terms of service</p> + <p><i18n.Translate>terms has changed, extending the service will imply accepting the new terms of service</i18n.Translate></p> <table> <thead> <tr> <td></td> - <td>old</td> + <td><i18n.Translate>old</i18n.Translate></td> <td> -></td> - <td>new</td> + <td><i18n.Translate>new</i18n.Translate></td> </tr> </thead> <tbody> <tr> - <td>fee</td> + <td><i18n.Translate>fee</i18n.Translate></td> <td>{info.paymentStatus.oldTerms.annualFee}</td> <td>-></td> <td>{info.paymentStatus.newTerms.annualFee}</td> </tr> <tr> - <td>storage</td> + <td><i18n.Translate>storage</i18n.Translate></td> <td>{info.paymentStatus.oldTerms.storageLimitInMegabytes}</td> <td>-></td> <td>{info.paymentStatus.newTerms.storageLimitInMegabytes}</td> @@ -117,11 +117,11 @@ function daysSince(d?: Timestamp) { const str = formatDuration(duration, { delimiter: ', ', format: [ - duration?.years ? 'years' : ( - duration?.months ? 'months' : ( - duration?.days ? 'days' : ( - duration?.hours ? 'hours' : ( - duration?.minutes ? 'minutes' : 'seconds' + duration?.years ? i18n.str`years` : ( + duration?.months ? i18n.str`months` : ( + duration?.days ? i18n.str`days` : ( + duration?.hours ? i18n.str`hours` : ( + duration?.minutes ? i18n.str`minutes` : i18n.str`seconds` ) ) ) @@ -139,13 +139,13 @@ function Error({ info }: { info: ProviderInfo }) { switch (info.backupProblem.type) { case "backup-conflicting-device": return <ErrorMessage title={<Fragment> - There is conflict with another backup from <b>{info.backupProblem.otherDeviceId}</b> + <i18n.Translate>There is conflict with another backup from <b>{info.backupProblem.otherDeviceId}</b></i18n.Translate> </Fragment>} /> case "backup-unreadable": return <ErrorMessage title="Backup is not readable" /> default: return <ErrorMessage title={<Fragment> - Unknown backup problem: {JSON.stringify(info.backupProblem)} + <i18n.Translate>Unknown backup problem: {JSON.stringify(info.backupProblem)}</i18n.Translate> </Fragment>} /> } } @@ -172,15 +172,15 @@ function colorByStatus(status: ProviderPaymentType) { function descriptionByStatus(status: ProviderPaymentStatus) { switch (status.type) { case ProviderPaymentType.InsufficientBalance: - return 'no enough balance to make the payment' + return i18n.str`no enough balance to make the payment` case ProviderPaymentType.Unpaid: - return 'not paid yet' + return i18n.str`not paid yet` case ProviderPaymentType.Paid: case ProviderPaymentType.TermsChanged: if (status.paidUntil.t_ms === 'never') { - return 'service paid.' + return i18n.str`service paid` } else { - return `service paid until ${format(status.paidUntil.t_ms, 'yyyy/MM/dd HH:mm:ss')}` + return i18n.str`service paid until ${format(status.paidUntil.t_ms, 'yyyy/MM/dd HH:mm:ss')}` } case ProviderPaymentType.Pending: return '' diff --git a/packages/taler-wallet-webextension/src/popup/Settings.tsx b/packages/taler-wallet-webextension/src/popup/Settings.tsx index d8cd04380..9bb10a4e3 100644 --- a/packages/taler-wallet-webextension/src/popup/Settings.tsx +++ b/packages/taler-wallet-webextension/src/popup/Settings.tsx @@ -15,18 +15,23 @@ */ +import { i18n } from "@gnu-taler/taler-util"; import { VNode } from "preact"; import { Checkbox } from "../components/Checkbox"; import { EditableText } from "../components/EditableText"; -import { useDevContext } from "../context/useDevContext"; +import { SelectList } from "../components/SelectList"; +import { useDevContext } from "../context/devContext"; import { useBackupDeviceName } from "../hooks/useBackupDeviceName"; import { useExtendedPermissions } from "../hooks/useExtendedPermissions"; +import { useLang } from "../hooks/useLang"; export function SettingsPage(): VNode { const [permissionsEnabled, togglePermissions] = useExtendedPermissions(); const { devMode, toggleDevMode } = useDevContext() const { name, update } = useBackupDeviceName() + const [lang, changeLang] = useLang() return <SettingsView + lang={lang} changeLang={changeLang} deviceName={name} setDeviceName={update} permissionsEnabled={permissionsEnabled} togglePermissions={togglePermissions} developerMode={devMode} toggleDeveloperMode={toggleDevMode} @@ -34,6 +39,8 @@ export function SettingsPage(): VNode { } export interface ViewProps { + lang: string; + changeLang: (s: string) => void; deviceName: string; setDeviceName: (s: string) => Promise<void>; permissionsEnabled: boolean; @@ -42,20 +49,43 @@ export interface ViewProps { toggleDeveloperMode: () => void; } -export function SettingsView({ deviceName, setDeviceName, permissionsEnabled, togglePermissions, developerMode, toggleDeveloperMode }: ViewProps): VNode { +import { strings as messages } from '../i18n/strings' + +type LangsNames = { + [P in keyof typeof messages]: string +} + +const names: LangsNames = { + es: 'Español [es]', + en: 'English [en]', + fr: 'Français [fr]', + de: 'Deutsch [de]', + sv: 'Svenska [sv]', + it: 'Italiano [it]', +} + + +export function SettingsView({ lang, changeLang, deviceName, setDeviceName, permissionsEnabled, togglePermissions, developerMode, toggleDeveloperMode }: ViewProps): VNode { return ( <div> <section style={{ height: 'calc(320px - 34px - 16px)', overflow: 'auto' }}> - - <h2>Wallet</h2> + <h2><i18n.Translate>Wallet</i18n.Translate></h2> + <SelectList + value={lang} + onChange={changeLang} + name="lang" + list={names} + label={i18n.str`Lang`} + description="(Choose your preferred lang)" + /> <EditableText value={deviceName} onChange={setDeviceName} name="device-id" - label="Device name" + label={i18n.str`Device name`} description="(This is how you will recognize the wallet in the backup provider)" /> - <h2>Permissions</h2> + <h2><i18n.Translate>Permissions</i18n.Translate></h2> <Checkbox label="Automatically open wallet based on page content" name="perm" description="(Enabling this option below will make using the wallet faster, but requires more permissions from your browser.)" diff --git a/packages/taler-wallet-webextension/src/popup/popup.tsx b/packages/taler-wallet-webextension/src/popup/popup.tsx index 32ff10a85..a6be4d192 100644 --- a/packages/taler-wallet-webextension/src/popup/popup.tsx +++ b/packages/taler-wallet-webextension/src/popup/popup.tsx @@ -27,7 +27,7 @@ import { i18n } from "@gnu-taler/taler-util"; import { ComponentChildren, JSX } from "preact"; import Match from "preact-router/match"; -import { useDevContext } from "../context/useDevContext"; +import { useDevContext } from "../context/devContext"; import { PopupNavigation } from '../components/styled' export enum Pages { |