From 41850c9f14baa5330919c6dabf161b1aaeda7376 Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Wed, 23 Feb 2022 15:18:37 -0300
Subject: add i18n where was missing

---
 .../src/components/BankDetailsByPaytoType.tsx      | 18 +++++-----
 .../src/components/Checkbox.tsx                    |  4 +--
 .../src/components/CheckboxOutlined.tsx            |  2 +-
 .../src/components/DebugCheckbox.tsx               | 11 ++++--
 .../src/components/Diagnostics.tsx                 | 40 ++++++++++++++++------
 .../src/components/EditableText.tsx                |  7 ++--
 .../src/components/ErrorMessage.tsx                |  5 ++-
 .../src/components/ErrorTalerOperation.tsx         |  2 +-
 .../src/components/Loading.tsx                     |  7 +++-
 .../src/components/LoadingError.tsx                |  2 +-
 .../src/components/MultiActionButton.tsx           |  2 +-
 .../src/components/Part.tsx                        |  4 +--
 .../src/components/SelectList.tsx                  |  5 +--
 .../src/components/TransactionItem.tsx             |  9 +++--
 14 files changed, 77 insertions(+), 41 deletions(-)

(limited to 'packages/taler-wallet-webextension/src/components')

diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
index 71365e089..205413007 100644
--- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
+++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { PaytoUri } from "@gnu-taler/taler-util";
+import { PaytoUri, Translate } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { CopiedIcon, CopyIcon } from "../svg";
@@ -34,23 +34,23 @@ export function BankDetailsByPaytoType({
   amount,
 }: BankDetailsProps): VNode {
   const firstPart = !payto ? undefined : !payto.isKnown ? (
-    <Row name="Account" value={payto.targetPath} />
+    <Row name={<Translate>Account</Translate>} value={payto.targetPath} />
   ) : payto.targetType === "x-taler-bank" ? (
     <Fragment>
-      <Row name="Bank host" value={payto.host} />
-      <Row name="Bank account" value={payto.account} />
+      <Row name={<Translate>Bank host</Translate>} value={payto.host} />
+      <Row name={<Translate>Bank account</Translate>} value={payto.account} />
     </Fragment>
   ) : payto.targetType === "iban" ? (
-    <Row name="IBAN" value={payto.iban} />
+    <Row name={<Translate>IBAN</Translate>} value={payto.iban} />
   ) : undefined;
   return (
     <div style={{ textAlign: "left" }}>
       <p>Bank transfer details</p>
       <table>
         {firstPart}
-        <Row name="Exchange" value={exchangeBaseUrl} />
-        <Row name="Chosen amount" value={amount} />
-        <Row name="Subject" value={subject} literal />
+        <Row name={<Translate>Exchange</Translate>} value={exchangeBaseUrl} />
+        <Row name={<Translate>Chosen amount</Translate>} value={amount} />
+        <Row name={<Translate>Subject</Translate>} value={subject} literal />
       </table>
     </div>
   );
@@ -61,7 +61,7 @@ function Row({
   value,
   literal,
 }: {
-  name: string;
+  name: VNode;
   value: string;
   literal?: boolean;
 }): VNode {
diff --git a/packages/taler-wallet-webextension/src/components/Checkbox.tsx b/packages/taler-wallet-webextension/src/components/Checkbox.tsx
index 59e84f4b0..0eb087b07 100644
--- a/packages/taler-wallet-webextension/src/components/Checkbox.tsx
+++ b/packages/taler-wallet-webextension/src/components/Checkbox.tsx
@@ -19,9 +19,9 @@ import { h, VNode } from "preact";
 interface Props {
   enabled: boolean;
   onToggle: () => void;
-  label: string;
+  label: VNode;
   name: string;
-  description?: string;
+  description?: VNode;
 }
 export function Checkbox({
   name,
diff --git a/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx b/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx
index 16909d29a..de7fb5e6c 100644
--- a/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx
+++ b/packages/taler-wallet-webextension/src/components/CheckboxOutlined.tsx
@@ -20,7 +20,7 @@ import { h, VNode } from "preact";
 interface Props {
   enabled: boolean;
   onToggle: () => void;
-  label: string;
+  label: VNode;
   name: string;
 }
 
diff --git a/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx b/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx
index b57075805..522fbce98 100644
--- a/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx
+++ b/packages/taler-wallet-webextension/src/components/DebugCheckbox.tsx
@@ -14,6 +14,7 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
+import { Translate } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 
 export function DebugCheckbox({
@@ -36,7 +37,7 @@ export function DebugCheckbox({
         htmlFor="checkbox-perm"
         style={{ marginLeft: "0.5em", fontWeight: "bold" }}
       >
-        Automatically open wallet based on page content
+        <Translate>Automatically open wallet based on page content</Translate>
       </label>
       <span
         style={{
@@ -46,8 +47,12 @@ export function DebugCheckbox({
           marginLeft: "2em",
         }}
       >
-        (Enabling this option below will make using the wallet faster, but
-        requires more permissions from your browser.)
+        (
+        <Translate>
+          Enabling this option below will make using the wallet faster, but
+          requires more permissions from your browser.
+        </Translate>
+        )
       </span>
     </div>
   );
diff --git a/packages/taler-wallet-webextension/src/components/Diagnostics.tsx b/packages/taler-wallet-webextension/src/components/Diagnostics.tsx
index d368a10bf..04b6abb55 100644
--- a/packages/taler-wallet-webextension/src/components/Diagnostics.tsx
+++ b/packages/taler-wallet-webextension/src/components/Diagnostics.tsx
@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { WalletDiagnostics } from "@gnu-taler/taler-util";
+import { Translate, WalletDiagnostics } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { PageLink } from "../renderHtml";
 
@@ -25,7 +25,13 @@ interface Props {
 
 export function Diagnostics({ timedOut, diagnostics }: Props): VNode {
   if (timedOut) {
-    return <p>Diagnostics timed out. Could not talk to the wallet backend.</p>;
+    return (
+      <p>
+        <Translate>
+          Diagnostics timed out. Could not talk to the wallet backend.
+        </Translate>
+      </p>
+    );
   }
 
   if (diagnostics) {
@@ -41,7 +47,9 @@ export function Diagnostics({ timedOut, diagnostics }: Props): VNode {
           paddingBottom: "0.2em",
         }}
       >
-        <p>Problems detected:</p>
+        <p>
+          <Translate>Problems detected:</Translate>
+        </p>
         <ol>
           {diagnostics.errors.map((errMsg) => (
             <li key={errMsg}>{errMsg}</li>
@@ -49,22 +57,32 @@ export function Diagnostics({ timedOut, diagnostics }: Props): VNode {
         </ol>
         {diagnostics.firefoxIdbProblem ? (
           <p>
-            Please check in your <code>about:config</code> settings that you
-            have IndexedDB enabled (check the preference name{" "}
-            <code>dom.indexedDB.enabled</code>).
+            <Translate>
+              Please check in your <code>about:config</code> settings that you
+              have IndexedDB enabled (check the preference name{" "}
+              <code>dom.indexedDB.enabled</code>).
+            </Translate>
           </p>
         ) : null}
         {diagnostics.dbOutdated ? (
           <p>
-            Your wallet database is outdated. Currently automatic migration is
-            not supported. Please go{" "}
-            <PageLink pageName="/reset-required">here</PageLink> to reset the
-            wallet database.
+            <Translate>
+              Your wallet database is outdated. Currently automatic migration is
+              not supported. Please go{" "}
+              <PageLink pageName="/reset-required">
+                <Translate>here</Translate>
+              </PageLink>{" "}
+              to reset the wallet database.
+            </Translate>
           </p>
         ) : null}
       </div>
     );
   }
 
-  return <p>Running diagnostics ...</p>;
+  return (
+    <p>
+      <Translate>Running diagnostics</Translate> ...
+    </p>
+  );
 }
diff --git a/packages/taler-wallet-webextension/src/components/EditableText.tsx b/packages/taler-wallet-webextension/src/components/EditableText.tsx
index 72bfbe809..c5d6e397e 100644
--- a/packages/taler-wallet-webextension/src/components/EditableText.tsx
+++ b/packages/taler-wallet-webextension/src/components/EditableText.tsx
@@ -14,6 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
+import { Translate } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useRef, useState } from "preact/hooks";
 
@@ -39,7 +40,9 @@ export function EditableText({
       return (
         <div style={{ display: "flex", justifyContent: "space-between" }}>
           <p>{value}</p>
-          <button onClick={() => setEditing(true)}>edit</button>
+          <button onClick={() => setEditing(true)}>
+            <Translate>Edit</Translate>
+          </button>
         </div>
       );
     };
@@ -54,7 +57,7 @@ export function EditableText({
                 onChange(ref.current.value).then(() => setEditing(false));
             }}
           >
-            confirm
+            <Translate>Confirm</Translate>
           </button>
         </div>
       );
diff --git a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
index 21f10eeef..085bf0b82 100644
--- a/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
+++ b/packages/taler-wallet-webextension/src/components/ErrorMessage.tsx
@@ -13,7 +13,7 @@
  You should have received a copy of the GNU General Public License along with
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
-import { VNode, h } from "preact";
+import { VNode, h, ComponentChildren } from "preact";
 import { useState } from "preact/hooks";
 import arrowDown from "../../static/img/chevron-down.svg";
 import { ErrorBox } from "./styled";
@@ -22,11 +22,10 @@ export function ErrorMessage({
   title,
   description,
 }: {
-  title?: string | VNode;
+  title: VNode;
   description?: string;
 }): VNode | null {
   const [showErrorDetail, setShowErrorDetail] = useState(false);
-  if (!title) return null;
   return (
     <ErrorBox style={{ paddingTop: 0, paddingBottom: 0 }}>
       <div>
diff --git a/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx b/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx
index a7b66ea3d..4852a71b1 100644
--- a/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx
+++ b/packages/taler-wallet-webextension/src/components/ErrorTalerOperation.tsx
@@ -24,7 +24,7 @@ export function ErrorTalerOperation({
   title,
   error,
 }: {
-  title?: string;
+  title?: VNode;
   error?: TalerErrorDetails;
 }): VNode | null {
   const { devMode } = useDevContext();
diff --git a/packages/taler-wallet-webextension/src/components/Loading.tsx b/packages/taler-wallet-webextension/src/components/Loading.tsx
index 34edac551..ff6d21376 100644
--- a/packages/taler-wallet-webextension/src/components/Loading.tsx
+++ b/packages/taler-wallet-webextension/src/components/Loading.tsx
@@ -13,8 +13,13 @@
  You should have received a copy of the GNU General Public License along with
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
+import { Translate } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 
 export function Loading(): VNode {
-  return <div>Loading...</div>;
+  return (
+    <div>
+      <Translate>Loading</Translate>...
+    </div>
+  );
 }
diff --git a/packages/taler-wallet-webextension/src/components/LoadingError.tsx b/packages/taler-wallet-webextension/src/components/LoadingError.tsx
index 6f572b882..ea0ff40d6 100644
--- a/packages/taler-wallet-webextension/src/components/LoadingError.tsx
+++ b/packages/taler-wallet-webextension/src/components/LoadingError.tsx
@@ -19,7 +19,7 @@ import { ErrorMessage } from "./ErrorMessage";
 import { ErrorTalerOperation } from "./ErrorTalerOperation";
 
 export interface Props {
-  title: string;
+  title: VNode;
   error: HookError;
 }
 export function LoadingError({ title, error }: Props): VNode {
diff --git a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx
index 977ac557d..1f46cf82c 100644
--- a/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx
+++ b/packages/taler-wallet-webextension/src/components/MultiActionButton.tsx
@@ -4,7 +4,7 @@ import { ButtonBoxPrimary, ButtonPrimary, ParagraphClickable } from "./styled";
 import { useState } from "preact/hooks";
 
 export interface Props {
-  label: (s: string) => string;
+  label: (s: string) => VNode;
   actions: string[];
   onClick: (s: string) => void;
 }
diff --git a/packages/taler-wallet-webextension/src/components/Part.tsx b/packages/taler-wallet-webextension/src/components/Part.tsx
index c8ecb46d2..05da90b2d 100644
--- a/packages/taler-wallet-webextension/src/components/Part.tsx
+++ b/packages/taler-wallet-webextension/src/components/Part.tsx
@@ -15,11 +15,11 @@
  */
 import { AmountLike } from "@gnu-taler/taler-util";
 import { ExtraLargeText, LargeText, SmallLightText } from "./styled";
-import { h } from "preact";
+import { h, VNode } from "preact";
 
 export type Kind = "positive" | "negative" | "neutral";
 interface Props {
-  title: string;
+  title: VNode;
   text: AmountLike;
   kind: Kind;
   big?: boolean;
diff --git a/packages/taler-wallet-webextension/src/components/SelectList.tsx b/packages/taler-wallet-webextension/src/components/SelectList.tsx
index c17b87339..a5f182d77 100644
--- a/packages/taler-wallet-webextension/src/components/SelectList.tsx
+++ b/packages/taler-wallet-webextension/src/components/SelectList.tsx
@@ -14,13 +14,14 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
+import { Translate } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { NiceSelect } from "./styled";
 
 interface Props {
   value?: string;
   onChange: (s: string) => void;
-  label: string;
+  label: VNode;
   list: {
     [label: string]: string;
   };
@@ -58,7 +59,7 @@ export function SelectList({
           {value === undefined ||
             (canBeNull && (
               <option selected disabled>
-                Select one option
+                <Translate>Select one option</Translate>
               </option>
               // ) : (
               //   <option selected>{list[value]}</option>
diff --git a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
index 89d6235aa..5c8897006 100644
--- a/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
+++ b/packages/taler-wallet-webextension/src/components/TransactionItem.tsx
@@ -21,6 +21,7 @@ import {
   Timestamp,
   Transaction,
   TransactionType,
+  Translate,
 } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import imageBank from "../../static/img/ri-bank-line.svg";
@@ -133,7 +134,7 @@ function TransactionLayout(props: TransactionLayoutProps): VNode {
         </LargeText>
         {props.pending && (
           <LightText style={{ marginTop: 5, marginBottom: 5 }}>
-            Waiting for confirmation
+            <Translate>Waiting for confirmation</Translate>
           </LightText>
         )}
         <SmallLightText style={{ marginTop: 5 }}>
@@ -195,7 +196,11 @@ function TransactionAmount(props: TransactionAmountProps): VNode {
         {sign}
         {Amounts.stringifyValue(props.amount)}
       </ExtraLargeText>
-      {props.pending && <div>PENDING</div>}
+      {props.pending && (
+        <div>
+          <Translate>PENDING</Translate>
+        </div>
+      )}
     </Column>
   );
 }
-- 
cgit v1.2.3