i18n

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> -&gt;</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>-&gt;</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>-&gt;</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 {