make withdrawal, pay and refunds work in the WebExtension

5 files changed, 25 insertions, 37 deletions

diff --git a/packages/taler-wallet-webextension/src/pages/refund.tsx b/packages/taler-wallet-webextension/src/pages/refund.tsx
index 1ace50226..74c33c020 100644
--- a/packages/taler-wallet-webextension/src/pages/refund.tsx
+++ b/packages/taler-wallet-webextension/src/pages/refund.tsx
@@ -23,22 +23,17 @@
 import React, { useEffect, useState } from "react";
 import * as wxApi from "../wxApi";
 import { AmountView } from "../renderHtml";
-import { PurchaseDetails } from "taler-wallet-core";
+import { PurchaseDetails, ApplyRefundResponse, Amounts } from "taler-wallet-core";
 
 function RefundStatusView(props: { talerRefundUri: string }): JSX.Element {
-  const [applied, setApplied] = useState(false);
-  const [purchaseDetails, setPurchaseDetails] = useState<
-    PurchaseDetails | undefined
-  >(undefined);
+  const [applyResult, setApplyResult] = useState<ApplyRefundResponse>();
   const [errMsg, setErrMsg] = useState<string | undefined>(undefined);
 
   useEffect(() => {
     const doFetch = async (): Promise<void> => {
       try {
         const result = await wxApi.applyRefund(props.talerRefundUri);
-        setApplied(true);
-        // const r = await wxApi.getPurchaseDetails(result.proposalId);
-        // setPurchaseDetails(r);
+        setApplyResult(result);
       } catch (e) {
         console.error(e);
         setErrMsg(e.message);
@@ -54,7 +49,7 @@ function RefundStatusView(props: { talerRefundUri: string }): JSX.Element {
     return <span>Error: {errMsg}</span>;
   }
 
-  if (!applied || !purchaseDetails) {
+  if (!applyResult) {
     return <span>Updating refund status</span>;
   }
 
@@ -62,11 +57,15 @@ function RefundStatusView(props: { talerRefundUri: string }): JSX.Element {
     <>
       <h2>Refund Status</h2>
       <p>
-        The product <em>{purchaseDetails.contractTerms.summary}</em> has
-        received a total refund of{" "}
-        <AmountView amount={purchaseDetails.totalRefundAmount} />.
+        The product <em>{applyResult.info.summary}</em> has
+        received a total effective refund of{" "}
+        <AmountView amount={applyResult.amountRefundGranted} />.
       </p>
-      <p>Note that additional fees from the exchange may apply.</p>
+      {applyResult.pendingAtExchange ? <p>Refund processing is still in progress.</p> : null}
+      {!Amounts.isZero(applyResult.amountRefundGone) ? <p>
+        The refund amount of <AmountView amount={applyResult.amountRefundGone} />
+        could not be applied.
+      </p> : null}
     </>
   );
 }
diff --git a/packages/taler-wallet-webextension/src/wxApi.ts b/packages/taler-wallet-webextension/src/wxApi.ts
index 9bc4a08e6..9b7697c99 100644
--- a/packages/taler-wallet-webextension/src/wxApi.ts
+++ b/packages/taler-wallet-webextension/src/wxApi.ts
@@ -32,6 +32,7 @@ import {
   GetWithdrawalDetailsForUriRequest,
   WithdrawUriInfoResponse,
   TransactionsResponse,
+  ApplyRefundResponse,
 } from "taler-wallet-core";
 
 export interface ExtendedPermissionsResponse {
@@ -131,7 +132,7 @@ export function getTransactions(): Promise<TransactionsResponse> {
  */
 export function applyRefund(
   talerRefundUri: string,
-): Promise<{ contractTermsHash: string; proposalId: string }> {
+): Promise<ApplyRefundResponse> {
   return callBackend("applyRefund", { talerRefundUri });
 }
 
diff --git a/packages/taler-wallet-webextension/src/wxBackend.ts b/packages/taler-wallet-webextension/src/wxBackend.ts
index a77b173fe..e1dcdde49 100644
--- a/packages/taler-wallet-webextension/src/wxBackend.ts
+++ b/packages/taler-wallet-webextension/src/wxBackend.ts
@@ -203,7 +203,7 @@ function makeSyncWalletRedirect(
   oldUrl: string,
   params?: { [name: string]: string | undefined },
 ): Record<string, unknown> {
-  const innerUrl = new URL(chrome.extension.getURL("/" + url));
+  const innerUrl = new URL(chrome.extension.getURL(url));
   if (params) {
     for (const key in params) {
       const p = params[key];
@@ -296,7 +296,11 @@ function headerListener(
     return;
   }
   console.log("in header listener");
-  if (details.statusCode === 402 || details.statusCode === 202) {
+  if (
+    details.statusCode === 402 ||
+    details.statusCode === 202 ||
+    details.statusCode === 200
+  ) {
     console.log(`got 402/202 from ${details.url}`);
     for (const header of details.responseHeaders || []) {
       if (header.name.toLowerCase() === "taler") {
@@ -332,7 +336,7 @@ function headerListener(
             );
           case TalerUriType.TalerRefund:
             return makeSyncWalletRedirect(
-              "refund.html",
+              "/static/refund.html",
               details.tabId,
               details.url,
               {
diff --git a/packages/taler-wallet-webextension/static/refund.html b/packages/taler-wallet-webextension/static/refund.html
index 3c1d78a24..68c826bcf 100644
--- a/packages/taler-wallet-webextension/static/refund.html
+++ b/packages/taler-wallet-webextension/static/refund.html
@@ -4,10 +4,10 @@
     <meta charset="UTF-8" />
     <title>Taler Wallet: Refund Status</title>
 
-    <link rel="icon" href="/img/icon.png" />
-    <link rel="stylesheet" type="text/css" href="/style/pure.css" />
-    <link rel="stylesheet" type="text/css" href="/style/wallet.css" />
-    <script src="/pageEntryPoint.js"></script>
+    <link rel="icon" href="/static/img/icon.png" />
+    <link rel="stylesheet" type="text/css" href="/static/style/pure.css" />
+    <link rel="stylesheet" type="text/css" href="/static/style/wallet.css" />
+    <script src="/dist/pageEntryPoint.js"></script>
   </head>
 
   <body>
diff --git a/packages/taler-wallet-webextension/static/return-coins.html b/packages/taler-wallet-webextension/static/return-coins.html
deleted file mode 100644
index 90703b447..000000000
--- a/packages/taler-wallet-webextension/static/return-coins.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8" />
-    <title>Taler Wallet: Return Coins to Bank Account</title>
-
-    <link rel="icon" href="/img/icon.png" />
-    <link rel="stylesheet" type="text/css" href="/style/pure.css" />
-    <link rel="stylesheet" type="text/css" href="/style/wallet.css" />
-    <script src="/pageEntryPoint.js"></script>
-  </head>
-
-  <body>
-    <div id="container"></div>
-  </body>
-</html>