some fixes

-fix fulfillment messages
-fix product list pricing and image on payment
-filter exchange by currency on withdrawal
-error message on operation error on withdrawal
-add taler url on balance page (just for dev)
-add no balance help
-better text when doing manual withdraw for the firt time
-removed balance from wallet (just history)
-removed pending page

3 files changed, 104 insertions, 36 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx b/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx
index 20c3b7178..2fdcd992c 100644
--- a/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Pay.stories.tsx
@@ -123,15 +123,20 @@ export const TicketWithAProductList = createExample(TestedComponent, {
       amount: "USD:10",
       products: [
         {
-          description: "beer",
+          description: "ten beers",
           price: "USD:1",
           quantity: 10,
           image: beer,
         },
         {
-          description: "brown beer",
-          price: "USD:2",
+          description: "beer without image",
+          price: "USD:1",
           quantity: 10,
+        },
+        {
+          description: "one brown beer",
+          price: "USD:2",
+          quantity: 1,
           image: beer,
         },
       ],
diff --git a/packages/taler-wallet-webextension/src/cta/Pay.tsx b/packages/taler-wallet-webextension/src/cta/Pay.tsx
index 806338c4d..7f5f42e8d 100644
--- a/packages/taler-wallet-webextension/src/cta/Pay.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Pay.tsx
@@ -48,6 +48,7 @@ import { Part } from "../components/Part";
 import { QR } from "../components/QR";
 import {
   ButtonSuccess,
+  LightText,
   LinkSuccess,
   SmallLightText,
   SuccessBox,
@@ -313,7 +314,9 @@ export function PaymentRequestView({
           <h3>Payment complete</h3>
           <p>
             {!payResult.contractTerms.fulfillment_message
-              ? "You will now be sent back to the merchant you came from."
+              ? payResult.contractTerms.fulfillment_url
+                ? `You are going to be redirected to ${payResult.contractTerms.fulfillment_url}`
+                : "You can close this page."
               : payResult.contractTerms.fulfillment_message}
           </p>
         </SuccessBox>
@@ -373,19 +376,59 @@ function ProductList({ products }: { products: Product[] }): VNode {
         List of products
       </SmallLightText>
       <dl>
-        {products.map((p, i) => (
-          <div key={i} style={{ display: "flex", textAlign: "left" }}>
-            <div>
-              <img src={p.image} style={{ width: 32, height: 32 }} />
-            </div>
-            <div>
-              <dt>{p.description}</dt>
-              <dd>
-                {p.price} x {p.quantity} {p.unit ? `(${p.unit})` : ``}
-              </dd>
+        {products.map((p, i) => {
+          if (p.price) {
+            const pPrice = Amounts.parseOrThrow(p.price);
+            return (
+              <div key={i} style={{ display: "flex", textAlign: "left" }}>
+                <div>
+                  <img
+                    src={p.image ? p.image : undefined}
+                    style={{ width: 32, height: 32 }}
+                  />
+                </div>
+                <div>
+                  <dt>
+                    {p.quantity ?? 1} x {p.description}{" "}
+                    <span style={{ color: "gray" }}>
+                      {Amounts.stringify(pPrice)}
+                    </span>
+                  </dt>
+                  <dd>
+                    <b>
+                      {Amounts.stringify(
+                        Amounts.mult(pPrice, p.quantity ?? 1).amount,
+                      )}
+                    </b>
+                  </dd>
+                </div>
+              </div>
+            );
+          }
+          return (
+            <div key={i} style={{ display: "flex", textAlign: "left" }}>
+              <div>
+                <img src={p.image} style={{ width: 32, height: 32 }} />
+              </div>
+              <div>
+                <dt>
+                  {p.quantity ?? 1} x {p.description}
+                </dt>
+                <dd>
+                  Total{` `}
+                  {p.price
+                    ? `${Amounts.stringifyValue(
+                        Amounts.mult(
+                          Amounts.parseOrThrow(p.price),
+                          p.quantity ?? 1,
+                        ).amount,
+                      )} ${p}`
+                    : "free"}
+                </dd>
+              </div>
             </div>
-          </div>
-        ))}
+          );
+        })}
       </dl>
     </Fragment>
   );
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
index a4ee640ca..8f45a047c 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw.tsx
@@ -28,10 +28,12 @@ import {
   i18n,
   WithdrawUriInfoResponse,
 } from "@gnu-taler/taler-util";
+import { OperationFailedError } from "@gnu-taler/taler-wallet-core";
 import { Fragment, h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { Loading } from "../components/Loading";
 import { LoadingError } from "../components/LoadingError";
+import { ErrorTalerOperation } from "../components/ErrorTalerOperation";
 import { LogoHeader } from "../components/LogoHeader";
 import { Part } from "../components/Part";
 import { SelectList } from "../components/SelectList";
@@ -64,7 +66,6 @@ export interface ViewProps {
   onAccept: (b: boolean) => void;
   reviewing: boolean;
   reviewed: boolean;
-  confirmed: boolean;
   terms: TermsState;
   knownExchanges: ExchangeListItem[];
 }
@@ -81,8 +82,12 @@ export function View({
   onReview,
   onAccept,
   reviewed,
-  confirmed,
 }: ViewProps): VNode {
+  const [withdrawError, setWithdrawError] = useState<
+    OperationFailedError | undefined
+  >(undefined);
+  const [confirmDisabled, setConfirmDisabled] = useState<boolean>(false);
+
   const needsReview = terms.status === "changed" || terms.status === "new";
 
   const [switchingExchange, setSwitchingExchange] = useState(false);
@@ -90,15 +95,37 @@ export function View({
     undefined,
   );
 
-  const exchanges = knownExchanges.reduce(
-    (prev, ex) => ({ ...prev, [ex.exchangeBaseUrl]: ex.exchangeBaseUrl }),
-    {},
-  );
+  const exchanges = knownExchanges
+    .filter((e) => e.currency === amount.currency)
+    .reduce(
+      (prev, ex) => ({ ...prev, [ex.exchangeBaseUrl]: ex.exchangeBaseUrl }),
+      {},
+    );
+
+  async function doWithdrawAndCheckError() {
+    try {
+      setConfirmDisabled(true);
+      await onWithdraw();
+    } catch (e) {
+      if (e instanceof OperationFailedError) {
+        setWithdrawError(e);
+      }
+      setConfirmDisabled(false);
+    }
+  }
 
   return (
     <WalletAction>
       <LogoHeader />
       <h2>{i18n.str`Digital cash withdrawal`}</h2>
+
+      {withdrawError && (
+        <ErrorTalerOperation
+          title="Could not finish the withdrawal operation"
+          error={withdrawError.operationError}
+        />
+      )}
+
       <section>
         <Part
           title="Total to withdraw"
@@ -168,8 +195,8 @@ export function View({
         {(terms.status === "accepted" || (needsReview && reviewed)) && (
           <ButtonSuccess
             upperCased
-            disabled={!exchangeBaseUrl || confirmed}
-            onClick={onWithdraw}
+            disabled={!exchangeBaseUrl || confirmDisabled}
+            onClick={doWithdrawAndCheckError}
           >
             {i18n.str`Confirm withdrawal`}
           </ButtonSuccess>
@@ -178,7 +205,7 @@ export function View({
           <ButtonWarning
             upperCased
             disabled={!exchangeBaseUrl}
-            onClick={onWithdraw}
+            onClick={doWithdrawAndCheckError}
           >
             {i18n.str`Withdraw anyway`}
           </ButtonWarning>
@@ -204,7 +231,6 @@ export function WithdrawPageWithParsedURI({
 
   const [reviewing, setReviewing] = useState<boolean>(false);
   const [reviewed, setReviewed] = useState<boolean>(false);
-  const [confirmed, setConfirmed] = useState<boolean>(false);
 
   const knownExchangesHook = useAsyncAsHook(() => wxApi.listExchanges());
 
@@ -267,16 +293,11 @@ export function WithdrawPageWithParsedURI({
 
   const onWithdraw = async (): Promise<void> => {
     if (!exchange) return;
-    setConfirmed(true);
     console.log("accepting exchange", exchange);
-    try {
-      const res = await wxApi.acceptWithdrawal(uri, exchange);
-      console.log("accept withdrawal response", res);
-      if (res.confirmTransferUrl) {
-        document.location.href = res.confirmTransferUrl;
-      }
-    } catch (e) {
-      setConfirmed(false);
+    const res = await wxApi.acceptWithdrawal(uri, exchange);
+    console.log("accept withdrawal response", res);
+    if (res.confirmTransferUrl) {
+      document.location.href = res.confirmTransferUrl;
     }
   };
 
@@ -289,7 +310,6 @@ export function WithdrawPageWithParsedURI({
       terms={detailsHook.response.tos}
       onSwitchExchange={setCustomExchange}
       knownExchanges={knownExchanges}
-      confirmed={confirmed}
       reviewed={reviewed}
       onAccept={onAccept}
       reviewing={reviewing}