re-enable tipping support in the WebExtension UI

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

@@ -121,6 +121,7 @@ export async function prepareTip(
     accepted: !!tipRecord && !!tipRecord.acceptedTimestamp,
     tipAmountRaw: Amounts.stringify(tipRecord.tipAmountRaw),
     exchangeBaseUrl: tipRecord.exchangeBaseUrl,
+    merchantBaseUrl: tipRecord.merchantBaseUrl,
     expirationTimestamp: tipRecord.tipExpiration,
     tipAmountEffective: Amounts.stringify(tipRecord.tipAmountEffective),
     walletTipId: tipRecord.walletTipId,

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

@@ -360,9 +360,33 @@ export interface PrepareTipResult {
    * Has the tip already been accepted?
    */
   accepted: boolean;
+
+  /**
+   * Amount that the merchant gave.
+   */
   tipAmountRaw: AmountString;
+  
+  /**
+   * Amount that arrived at the wallet.
+   * Might be lower than the raw amount due to fees.
+   */
   tipAmountEffective: AmountString;
+  
+  /**
+   * Base URL of the merchant backend giving then tip.
+   */
+  merchantBaseUrl: string;
+
+  /**
+   * Base URL of the exchange that is used to withdraw the tip.
+   * Determined by the merchant, the wallet/user has no choice here.
+   */
   exchangeBaseUrl: string;
+  
+  /**
+   * Time when the tip will expire.  After it expired, it can't be picked
+   * up anymore.
+   */
   expirationTimestamp: Timestamp;
 }
 
@@ -372,6 +396,7 @@ export const codecForPrepareTipResult = (): Codec<PrepareTipResult> =>
      .property("tipAmountRaw", codecForAmountString())
      .property("tipAmountEffective", codecForAmountString())
      .property("exchangeBaseUrl", codecForString())
+     .property("merchantBaseUrl", codecForString())
      .property("expirationTimestamp", codecForTimestamp)
      .property("walletTipId", codecForString())
     .build("PrepareTipResult");

packages/taler-wallet-webextension/src/pageEntryPoint.ts

@@ -27,6 +27,7 @@ import { createWelcomePage } from "./pages/welcome";
 import { createPayPage } from "./pages/pay";
 import { createRefundPage } from "./pages/refund";
 import { setupI18n } from "taler-wallet-core";
+import { createTipPage } from './pages/tip';
 
 function main(): void {
   try {
@@ -52,6 +53,9 @@ function main(): void {
       case "refund.html":
         mainElement = createRefundPage();
         break;
+      case "tip.html":
+        mainElement = createTipPage();
+        break;
       default:
         throw Error(`page '${page}' not implemented`);
     }

packages/taler-wallet-webextension/src/pages/tip.tsx

@@ -15,14 +15,81 @@
  */
 
 /**
- * Page shown to the user to confirm creation
+ * Page shown to the user to accept or ignore a tip from a merchant.
- * of a reserve, usually requested by the bank.
  *
- * @author Florian Dold
+ * @author Florian Dold <dold@taler.net>
  */
 
 import * as React from "react";
+import { useEffect, useState } from "react";
+import { PrepareTipResult } from "taler-wallet-core";
+import { AmountView } from "../renderHtml";
+import * as wxApi from "../wxApi";
+
+function TalerTipDialog({ talerTipUri }: { talerTipUri: string }): JSX.Element {
+  const [updateCounter, setUpdateCounter] = useState<number>(0);
+  const [prepareTipResult, setPrepareTipResult] = useState<
+    PrepareTipResult | undefined
+  >();
+
+  const [tipIgnored, setTipIgnored] = useState(false);
+
+  useEffect(() => {
+    const doFetch = async (): Promise<void> => {
+      const p = await wxApi.prepareTip({ talerTipUri });
+      setPrepareTipResult(p);
+    };
+    doFetch();
+  }, [talerTipUri, updateCounter]);
+
+  const doAccept = async () => {
+    if (!prepareTipResult) {
+      return;
+    }
+    await wxApi.acceptTip({ walletTipId: prepareTipResult?.walletTipId });
+    setUpdateCounter(updateCounter + 1);
+  };
+
+  const doIgnore = () => {
+    setTipIgnored(true);
+  };
+
+  if (tipIgnored) {
+    return <span>You've ignored the tip.</span>;
+  }
+
+  if (!prepareTipResult) {
+    return <span>Loading ...</span>;
+  }
+
+  if (prepareTipResult.accepted) {
+    return (
+      <span>
+        Tip from <code>{prepareTipResult.merchantBaseUrl}</code> accepted.
+        Check your transactions list for more details.
+      </span>
+    );
+  } else {
+    return (
+      <div>
+        <p>
+          The merchant <code>{prepareTipResult.merchantBaseUrl}</code> is
+          offering you a tip of{" "}
+          <strong><AmountView amount={prepareTipResult.tipAmountEffective} /></strong> via the
+          exchange <code>{prepareTipResult.exchangeBaseUrl}</code>
+        </p>
+        <button onClick={doAccept}>Accept tip</button>
+        <button onClick={doIgnore}>Ignore</button>
+      </div>
+    );
+  }
+}
 
 export function createTipPage(): JSX.Element {
-  return <span>not implemented</span>;
+  const url = new URL(document.location.href);
+  const talerTipUri = url.searchParams.get("talerTipUri");
+  if (!talerTipUri) {
+    throw Error("invalid parameter");
+  }
+  return <TalerTipDialog talerTipUri={talerTipUri} />;
 }

packages/taler-wallet-webextension/src/wxApi.ts

@@ -33,6 +33,9 @@ import {
   WithdrawUriInfoResponse,
   TransactionsResponse,
   ApplyRefundResponse,
+  PrepareTipRequest,
+  PrepareTipResult,
+  AcceptTipRequest,
 } from "taler-wallet-core";
 
 export interface ExtendedPermissionsResponse {
@@ -188,6 +191,14 @@ export function getWithdrawalDetailsForUri(
   return callBackend("getWithdrawalDetailsForUri", req);
 }
 
+export function prepareTip(req: PrepareTipRequest): Promise<PrepareTipResult> {
+  return callBackend("prepareTip", req);
+}
+
+export function acceptTip(req: AcceptTipRequest): Promise<void> {
+  return callBackend("acceptTip", req);
+}
+
 export function onUpdateNotification(f: () => void): () => void {
   const port = chrome.runtime.connect({ name: "notifications" });
   const listener = (): void => {

packages/taler-wallet-webextension/static/tip.html

@@ -4,10 +4,10 @@
     <meta charset="UTF-8" />
     <title>Taler Wallet: Received Tip</title>
 
-    <link rel="icon" href="/img/icon.png" />
+    <link rel="icon" href="/static/img/icon.png" />
-    <link rel="stylesheet" type="text/css" href="/style/pure.css" />
+    <link rel="stylesheet" type="text/css" href="/static/style/pure.css" />
-    <link rel="stylesheet" type="text/css" href="/style/wallet.css" />
+    <link rel="stylesheet" type="text/css" href="/static/style/wallet.css" />
-    <script src="/pageEntryPoint.js"></script>
+    <script src="/dist/pageEntryPoint.js"></script>
   </head>
 
   <body>