make withdrawal, pay and refunds work in the WebExtension

packages/taler-wallet-core/src/operations/refund.ts

@@ -527,6 +527,16 @@ export async function applyRefund(
     amountRefundGone: Amounts.stringify(amountRefundGone),
     amountRefundGranted: Amounts.stringify(amountRefundGranted),
     pendingAtExchange,
+    info: {
+      contractTermsHash: purchase.contractData.contractTermsHash,
+      merchant: purchase.contractData.merchant,
+      orderId: purchase.contractData.orderId,
+      products: purchase.contractData.products,
+      summary: purchase.contractData.summary,
+      fulfillmentMessage: purchase.contractData.fulfillmentMessage,
+      summary_i18n: purchase.contractData.summaryI18n,
+      fulfillmentMessage_i18n: purchase.contractData.fulfillmentMessageI18n,
+    }
   };
 }
 

packages/taler-wallet-core/src/types/walletTypes.ts

@@ -55,6 +55,7 @@ import {
   codecForContractTerms,
   ContractTerms,
 } from "./talerTypes";
+import { OrderShortInfo, codecForOrderShortInfo } from "./transactions";
 
 /**
  * Response for the create reserve request to the wallet.
@@ -880,6 +881,8 @@ export interface ApplyRefundResponse {
   amountRefundGone: AmountString;
 
   pendingAtExchange: boolean;
+
+  info: OrderShortInfo;
 }
 
 export const codecForApplyRefundResponse = (): Codec<ApplyRefundResponse> =>
@@ -890,6 +893,7 @@ export const codecForApplyRefundResponse = (): Codec<ApplyRefundResponse> =>
     .property("contractTermsHash", codecForString())
     .property("pendingAtExchange", codecForBoolean())
     .property("proposalId", codecForString())
+    .property("info", codecForOrderShortInfo())
     .build("ApplyRefundResponse");
 
 export interface SetCoinSuspendedRequest {

packages/taler-wallet-core/src/util/amounts.ts

@@ -257,7 +257,8 @@ export function isNonZero(a: AmountJson): boolean {
   return a.value > 0 || a.fraction > 0;
 }
 
-export function isZero(a: AmountJson): boolean {
+export function isZero(a: AmountLike): boolean {
+  a = jsonifyAmount(a);
   return a.value === 0 && a.fraction === 0;
 }
 

packages/taler-wallet-core/src/wallet.ts

@@ -70,7 +70,6 @@ import {
   AcceptManualWithdrawalResult,
   BalancesResponse,
   TestPayArgs,
-  PreparePayResultType,
   IntegrationTestArgs,
   codecForAddExchangeRequest,
   codecForGetWithdrawalDetailsForUri,
@@ -80,7 +79,6 @@ import {
   codecForApplyRefundRequest,
   codecForAcceptBankIntegratedWithdrawalRequest,
   codecForGetExchangeTosRequest,
-  codecForAbortProposalRequest,
   codecForConfirmPayRequest,
   CoreApiResponse,
   codecForPreparePayRequest,
@@ -95,6 +93,7 @@ import {
   codecForPrepareTipRequest,
   codecForAcceptTipRequest,
   codecForAbortPayWithRefundRequest,
+  ApplyRefundResponse,
 } from "./types/walletTypes";
 import { Logger } from "./util/logging";
 
@@ -723,7 +722,7 @@ export class Wallet {
    */
   async applyRefund(
     talerRefundUri: string,
-  ): Promise<{ contractTermsHash: string; proposalId: string }> {
+  ): Promise<ApplyRefundResponse> {
     return applyRefund(this.ws, talerRefundUri);
   }
 

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}
     </>
   );
 }

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 });
 }
 

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,
               {

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>

packages/taler-wallet-webextension/static/return-coins.html

@@ -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>