fix permission api, grouping all cta into same path

6 files changed, 87 insertions, 40 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
index 0b0af25ab..daea9e3bd 100644
--- a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
@@ -17,7 +17,9 @@
 import { i18n, Timestamp } from "@gnu-taler/taler-util";
 import {
   ProviderInfo,
+  ProviderPaymentPaid,
   ProviderPaymentStatus,
+  ProviderPaymentType,
 } from "@gnu-taler/taler-wallet-core";
 import {
   differenceInMonths,
@@ -25,6 +27,8 @@ import {
   intervalToDuration,
 } from "date-fns";
 import { Fragment, h, VNode } from "preact";
+import { Loading } from "../components/Loading";
+import { LoadingError } from "../components/LoadingError";
 import {
   BoldLight,
   ButtonPrimary,
@@ -36,23 +40,58 @@ import {
   SmallLightText,
   SmallText,
 } from "../components/styled";
-import { useBackupStatus } from "../hooks/useBackupStatus";
+import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import { Pages } from "../NavigationBar";
+import * as wxApi from "../wxApi";
 
 interface Props {
   onAddProvider: () => void;
 }
 
+// interface BackupStatus {
+//   deviceName: string;
+//   providers: ProviderInfo[];
+// }
+
+// async function getBackupInfoOrdered(): BackupStatus {
+//   //create a first list of backup info by currency
+//   const status = await wxApi.getBackupInfo();
+
+//   return { deviceName: status.deviceId, providers };
+// }
+
+// async function sync() {
+//   await wxApi.syncAllProviders();
+// }
+
 export function BackupPage({ onAddProvider }: Props): VNode {
-  const status = useBackupStatus();
+  const status = useAsyncAsHook(wxApi.getBackupInfo);
   if (!status) {
-    return <div>Loading...</div>;
+    return <Loading />;
+  }
+  if (status.hasError) {
+    return (
+      <LoadingError title="Could not load backup providers" error={status} />
+    );
   }
+
+  const providers = status.response.providers.sort((a, b) => {
+    if (
+      a.paymentStatus.type === ProviderPaymentType.Paid &&
+      b.paymentStatus.type === ProviderPaymentType.Paid
+    ) {
+      return getStatusPaidOrder(a.paymentStatus, b.paymentStatus);
+    }
+    return (
+      getStatusTypeOrder(a.paymentStatus) - getStatusTypeOrder(b.paymentStatus)
+    );
+  });
+
   return (
     <BackupView
-      providers={status.providers}
+      providers={providers}
       onAddProvider={onAddProvider}
-      onSyncAll={status.sync}
+      onSyncAll={wxApi.syncAllProviders}
     />
   );
 }
@@ -128,7 +167,7 @@ function BackupLayout(props: TransactionLayoutProps): VNode {
     <RowBorderGray>
       <div style={{ color: !props.active ? "grey" : undefined }}>
         <a
-          href={Pages.provider_detail.replace(
+          href={Pages.backup_provider_detail.replace(
             ":pid",
             encodeURIComponent(props.id),
           )}
@@ -194,3 +233,21 @@ function daysUntil(d: Timestamp): string {
   });
   return `${str}`;
 }
+
+function getStatusTypeOrder(t: ProviderPaymentStatus) {
+  return [
+    ProviderPaymentType.InsufficientBalance,
+    ProviderPaymentType.TermsChanged,
+    ProviderPaymentType.Unpaid,
+    ProviderPaymentType.Paid,
+    ProviderPaymentType.Pending,
+  ].indexOf(t.type);
+}
+
+function getStatusPaidOrder(a: ProviderPaymentPaid, b: ProviderPaymentPaid) {
+  return a.paidUntil.t_ms === "never"
+    ? -1
+    : b.paidUntil.t_ms === "never"
+    ? 1
+    : a.paidUntil.t_ms - b.paidUntil.t_ms;
+}
diff --git a/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx b/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx
index 5fa08f8a6..111ac86c6 100644
--- a/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/BalancePage.tsx
@@ -18,13 +18,9 @@ import { Amounts, Balance, i18n } from "@gnu-taler/taler-util";
 import { Fragment, h, VNode } from "preact";
 import { BalanceTable } from "../components/BalanceTable";
 import { Loading } from "../components/Loading";
+import { LoadingError } from "../components/LoadingError";
 import { MultiActionButton } from "../components/MultiActionButton";
-import {
-  ButtonPrimary,
-  Centered,
-  ErrorBox,
-  SuccessBox,
-} from "../components/styled";
+import { ButtonPrimary, Centered } from "../components/styled";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
 import { PageLink } from "../renderHtml";
 import * as wxApi from "../wxApi";
@@ -49,15 +45,7 @@ export function BalancePage({
   }
 
   if (state.hasError) {
-    return (
-      <Fragment>
-        <ErrorBox>{state.message}</ErrorBox>
-        <p>
-          Click <PageLink pageName="welcome">here</PageLink> for help and
-          diagnostics.
-        </p>
-      </Fragment>
-    );
+    return <LoadingError title="Could not load balance page" error={state} />;
   }
 
   return (
diff --git a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
index f346d6bf3..d8e46cc46 100644
--- a/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ExchangeSetUrl.tsx
@@ -1,6 +1,5 @@
 import {
   canonicalizeBaseUrl,
-  ExchangeListItem,
   i18n,
   TalerConfigResponse,
 } from "@gnu-taler/taler-util";
diff --git a/packages/taler-wallet-webextension/src/wallet/History.tsx b/packages/taler-wallet-webextension/src/wallet/History.tsx
index 7912d169a..a295ca28f 100644
--- a/packages/taler-wallet-webextension/src/wallet/History.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/History.tsx
@@ -23,12 +23,12 @@ import {
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { Loading } from "../components/Loading";
+import { LoadingError } from "../components/LoadingError";
 import {
   ButtonBoxPrimary,
   ButtonBoxWarning,
   ButtonPrimary,
   DateSeparator,
-  ErrorBox,
   NiceSelect,
   WarningBox,
 } from "../components/styled";
@@ -62,10 +62,10 @@ export function HistoryPage({
 
   if (transactionQuery.hasError) {
     return (
-      <Fragment>
-        <ErrorBox>{transactionQuery.message}</ErrorBox>
-        <p>There was an error loading the transactions.</p>
-      </Fragment>
+      <LoadingError
+        title="Could not load the list of transactions"
+        error={transactionQuery}
+      />
     );
   }
 
diff --git a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
index c7958eb8a..86c3c1456 100644
--- a/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ManualWithdrawPage.tsx
@@ -14,23 +14,23 @@
  TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
 */
 
-import { VNode, h, Fragment } from "preact";
-import { useState } from "preact/hooks";
-import { CreateManualWithdraw } from "./CreateManualWithdraw";
-import * as wxApi from "../wxApi";
 import {
   AcceptManualWithdrawalResult,
   AmountJson,
   Amounts,
   NotificationType,
 } from "@gnu-taler/taler-util";
-import { ReserveCreated } from "./ReserveCreated";
+import { h, VNode } from "preact";
 import { route } from "preact-router";
-import { Pages } from "../NavigationBar";
+import { useState } from "preact/hooks";
+import { Loading } from "../components/Loading";
+import { LoadingError } from "../components/LoadingError";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook";
+import { Pages } from "../NavigationBar";
+import * as wxApi from "../wxApi";
+import { CreateManualWithdraw } from "./CreateManualWithdraw";
 import { ExchangeAddPage } from "./ExchangeAddPage";
-import { Loading } from "../components/Loading";
-import { ErrorBox } from "../components/styled";
+import { ReserveCreated } from "./ReserveCreated";
 
 export function ManualWithdrawPage({ currency }: { currency?: string }): VNode {
   const [success, setSuccess] = useState<
@@ -92,12 +92,13 @@ export function ManualWithdrawPage({ currency }: { currency?: string }): VNode {
   }
   if (state.hasError) {
     return (
-      <Fragment>
-        <ErrorBox>{state.message}</ErrorBox>
-        <p>There was an error getting the known exchanges</p>
-      </Fragment>
+      <LoadingError
+        title="Could not load the list of known exchanges"
+        error={state}
+      />
     );
   }
+
   const exchangeList = state.response.exchanges.reduce(
     (p, c) => ({
       ...p,
diff --git a/packages/taler-wallet-webextension/src/wallet/Settings.tsx b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
index 293448785..ff47620eb 100644
--- a/packages/taler-wallet-webextension/src/wallet/Settings.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Settings.tsx
@@ -142,7 +142,9 @@ export function SettingsView({
         )}
         <div style={{ display: "flex", justifyContent: "space-between" }}>
           <div />
-          <LinkPrimary href={Pages.exchange_add}>Add an exchange</LinkPrimary>
+          <LinkPrimary href={Pages.settings_exchange_add}>
+            Add an exchange
+          </LinkPrimary>
         </div>
 
         <h2>Config</h2>