Merge remote-tracking branch 'origin/master' into HEADdev/sebasjm/weblate-fix-tr-rebase

1 files changed, 67 insertions, 33 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
index 239a7b31d..65049d6b6 100644
--- a/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ProviderDetailPage.tsx
@@ -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={
+          <i18n.Translate>
+            There was an error loading the provider detail for "{providerURL}"
+          </i18n.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,32 @@ 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>
+            <i18n.Translate>
+              There is not known provider with url "{url}".
+            </i18n.Translate>
+          </p>
+        </section>
+        <footer>
+          <Button onClick={onBack}>
+            &lt; <i18n.Translate>Back</i18n.Translate>
+          </Button>
+          <div />
+        </footer>
+      </Fragment>
+    );
+  }
+  const lb = info.lastSuccessfulBackupTimestamp;
   const isPaid =
     info.paymentStatus.type === ProviderPaymentType.Paid ||
     info.paymentStatus.type === ProviderPaymentType.TermsChanged;
@@ -125,7 +137,10 @@ export function ProviderView({
       </header>
       <section>
         <p>
-          <b>Last backup:</b> <Time timestamp={lb} format="dd MMMM yyyy" />
+          <b>
+            <i18n.Translate>Last backup</i18n.Translate>:
+          </b>{" "}
+          <Time timestamp={lb} format="dd MMMM yyyy" />
         </p>
         <ButtonPrimary onClick={onSync}>
           <i18n.Translate>Back up</i18n.Translate>
@@ -133,7 +148,11 @@ export function ProviderView({
         {info.terms && (
           <Fragment>
             <p>
-              <b>Provider fee:</b> {info.terms && info.terms.annualFee} per year
+              <b>
+                <i18n.Translate>Provider fee</i18n.Translate>:
+              </b>{" "}
+              {info.terms && info.terms.annualFee}{" "}
+              <i18n.Translate>per year</i18n.Translate>
             </p>
           </Fragment>
         )}
@@ -187,11 +206,11 @@ export function ProviderView({
       </section>
       <footer>
         <Button onClick={onBack}>
-          <i18n.Translate> &lt; back</i18n.Translate>
+          &lt; <i18n.Translate>back</i18n.Translate>
         </Button>
         <div>
           <ButtonDestructive onClick={onDelete}>
-            <i18n.Translate>remove provider</i18n.Translate>
+            <i18n.Translate>Remove provider</i18n.Translate>
           </ButtonDestructive>
         </div>
       </footer>
@@ -201,7 +220,14 @@ export function ProviderView({
 
 function Error({ info }: { info: ProviderInfo }): VNode {
   if (info.lastError) {
-    return <ErrorMessage title={info.lastError.hint} />;
+    return (
+      <ErrorMessage
+        title={
+          <i18n.Translate>This provider has reported an error</i18n.Translate>
+        }
+        description={info.lastError.hint}
+      />
+    );
   }
   if (info.backupProblem) {
     switch (info.backupProblem.type) {
@@ -219,7 +245,11 @@ function Error({ info }: { info: ProviderInfo }): VNode {
           />
         );
       case "backup-unreadable":
-        return <ErrorMessage title="Backup is not readable" />;
+        return (
+          <ErrorMessage
+            title={<i18n.Translate>Backup is not readable</i18n.Translate>}
+          />
+        );
       default:
         return (
           <ErrorMessage
@@ -239,16 +269,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>
+            <i18n.Translate>service paid</i18n.Translate>
+          </span>
+        );
       }
       return (
         <Fragment>
-          <b>Backup valid until:</b>{" "}
+          <b>
+            <i18n.Translate>Backup valid until</i18n.Translate>:
+          </b>{" "}
           <Time timestamp={status.paidUntil} format="dd MMM yyyy" />
         </Fragment>
       );