invoice and transfer details

19 files changed, 159 insertions, 50 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/index.ts b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/index.ts
index f12fd80e0..0ef341fa9 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/index.ts
+++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/index.ts
@@ -25,6 +25,7 @@ import { ButtonHandler, SelectFieldHandler, TextFieldHandler } from "../../mui/h
 
 export interface Props {
   amount: string;
+  onClose: () => Promise<void>;
 }
 
 export type State =
@@ -47,11 +48,11 @@ export namespace State {
 
   export interface BaseInfo {
     error: undefined;
+    cancel: ButtonHandler;
   }
   export interface ShowQr extends BaseInfo {
     status: "show-qr";
     talerUri: string;
-    close: () => void;
   }
   export interface Ready extends BaseInfo {
     status: "ready";
diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts
index dd9220480..f6a0847b2 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts
@@ -22,7 +22,7 @@ import * as wxApi from "../../wxApi.js";
 import { Props, State } from "./index.js";
 
 export function useComponentState(
-  { amount: amountStr }: Props,
+  { amount: amountStr, onClose }: Props,
   api: typeof wxApi,
 ): State {
   const amount = Amounts.parseOrThrow(amountStr)
@@ -53,7 +53,9 @@ export function useComponentState(
       status: "show-qr",
       talerUri,
       error: undefined,
-      close: () => { null },
+      cancel: {
+        onClick: onClose
+      }
       // chosenAmount: amount,
       // toBeReceived: amount,
     }
@@ -105,6 +107,9 @@ export function useComponentState(
         setTalerUri(uri)
       }
     },
+    cancel: {
+      onClick: onClose
+    },
     chosenAmount: amount,
     toBeReceived: amount,
     error: undefined,
diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/stories.tsx b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/stories.tsx
index e6252062e..970b51b55 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/stories.tsx
@@ -29,9 +29,7 @@ export default {
 export const ShowQr = createExample(ShowQrView, {
   talerUri:
     "taler://pay-pull/exchange.taler.ar/HS585JK0QCXHJ8Z8QWZA3EBAY5WY7XNC1RR2MHJXSH2Z4WP0YPJ0",
-  close: () => {
-    null;
-  },
+  cancel: {},
 });
 
 export const Ready = createExample(ReadyView, {
@@ -40,6 +38,7 @@ export const Ready = createExample(ReadyView, {
     value: 1,
     fraction: 0,
   },
+  cancel: {},
   toBeReceived: {
     currency: "ARS",
     value: 1,
diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx
index ebb15e75c..3de36b6e9 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx
@@ -15,6 +15,7 @@
  */
 
 import { h, VNode } from "preact";
+import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js";
 import { LoadingError } from "../../components/LoadingError.js";
 import { LogoHeader } from "../../components/LogoHeader.js";
 import { Part } from "../../components/Part.js";
@@ -44,7 +45,7 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode {
   );
 }
 
-export function ShowQrView({ talerUri, close }: State.ShowQr): VNode {
+export function ShowQrView({ talerUri, cancel }: State.ShowQr): VNode {
   const { i18n } = useTranslationContext();
   return (
     <WalletAction>
@@ -57,7 +58,7 @@ export function ShowQrView({ talerUri, close }: State.ShowQr): VNode {
         <QR text={talerUri} />
       </section>
       <section>
-        <Link upperCased onClick={close}>
+        <Link upperCased onClick={cancel.onClick}>
           <i18n.Translate>Close</i18n.Translate>
         </Link>
       </section>
@@ -70,6 +71,7 @@ export function ReadyView({
   exchangeUrl,
   subject,
   showQr,
+  cancel,
   operationError,
   copyToClipboard,
   toBeReceived,
@@ -83,6 +85,16 @@ export function ReadyView({
       <SubTitle>
         <i18n.Translate>Digital invoice</i18n.Translate>
       </SubTitle>
+      {operationError && (
+        <ErrorTalerOperation
+          title={
+            <i18n.Translate>
+              Could not finish the invoice creation
+            </i18n.Translate>
+          }
+          error={operationError}
+        />
+      )}
       <section style={{ textAlign: "left" }}>
         <TextField
           label="Subject"
@@ -145,6 +157,11 @@ export function ReadyView({
           </Grid>
         </Grid>
       </section>
+      <section>
+        <Link upperCased onClick={cancel.onClick}>
+          <i18n.Translate>Cancel</i18n.Translate>
+        </Link>
+      </section>
     </WalletAction>
   );
 }
diff --git a/packages/taler-wallet-webextension/src/cta/InvoicePay/index.ts b/packages/taler-wallet-webextension/src/cta/InvoicePay/index.ts
index 8d1612c7a..2521ee69c 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoicePay/index.ts
+++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/index.ts
@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { AmountJson, TalerErrorDetail } from "@gnu-taler/taler-util";
+import { AbsoluteTime, AmountJson, TalerErrorDetail } from "@gnu-taler/taler-util";
 import { Loading } from "../../components/Loading.js";
 import { HookError } from "../../hooks/useAsyncAsHook.js";
 import { ButtonHandler } from "../../mui/handlers.js";
@@ -25,6 +25,7 @@ import { LoadingUriView, ReadyView } from "./views.js";
 
 export interface Props {
   talerPayPullUri: string;
+  onClose: () => Promise<void>;
 }
 
 export type State =
@@ -46,10 +47,13 @@ export namespace State {
 
   export interface BaseInfo {
     error: undefined;
+    cancel: ButtonHandler;
   }
   export interface Ready extends BaseInfo {
     status: "ready";
     amount: AmountJson,
+    summary: string | undefined,
+    expiration: AbsoluteTime | undefined,
     error: undefined;
     accept: ButtonHandler;
     operationError?: TalerErrorDetail;
diff --git a/packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts b/packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts
index 53db117f9..27be1e424 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/state.ts
@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { Amounts, TalerErrorDetail } from "@gnu-taler/taler-util";
+import { AbsoluteTime, Amounts, TalerErrorDetail, TalerProtocolTimestamp } from "@gnu-taler/taler-util";
 import { TalerError } from "@gnu-taler/taler-wallet-core";
 import { useState } from "preact/hooks";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
@@ -22,7 +22,7 @@ import * as wxApi from "../../wxApi.js";
 import { Props, State } from "./index.js";
 
 export function useComponentState(
-  { talerPayPullUri }: Props,
+  { talerPayPullUri, onClose }: Props,
   api: typeof wxApi,
 ): State {
   const hook = useAsyncAsHook(async () => {
@@ -45,13 +45,18 @@ export function useComponentState(
     };
   }
 
-  const { amount, peerPullPaymentIncomingId } = hook.response
+  const { amount: purseAmount, contractTerms, peerPullPaymentIncomingId } = hook.response
+
+  const amount: string = contractTerms?.amount
+  const summary: string | undefined = contractTerms?.summary
+  const expiration: TalerProtocolTimestamp | undefined = contractTerms?.purse_expiration
 
   async function accept(): Promise<void> {
     try {
       const resp = await api.acceptPeerPullPayment({
         peerPullPaymentIncomingId
       })
+      await onClose()
     } catch (e) {
       if (e instanceof TalerError) {
         setOperationError(e.errorDetail)
@@ -69,6 +74,11 @@ export function useComponentState(
     accept: {
       onClick: accept
     },
+    summary,
+    expiration: expiration ? AbsoluteTime.fromTimestamp(expiration) : undefined,
+    cancel: {
+      onClick: onClose
+    },
     operationError
   }
 }
diff --git a/packages/taler-wallet-webextension/src/cta/InvoicePay/stories.tsx b/packages/taler-wallet-webextension/src/cta/InvoicePay/stories.tsx
index 6adaa5c22..81b79a208 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoicePay/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/stories.tsx
@@ -33,4 +33,5 @@ export const Ready = createExample(ReadyView, {
     fraction: 0,
   },
   accept: {},
+  cancel: {},
 });
diff --git a/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx b/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx
index 2960c3168..71bdb20b8 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/InvoicePay/views.tsx
@@ -20,19 +20,10 @@ import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js";
 import { LoadingError } from "../../components/LoadingError.js";
 import { LogoHeader } from "../../components/LogoHeader.js";
 import { Part } from "../../components/Part.js";
-import { QR } from "../../components/QR.js";
-import {
-  Link,
-  SubTitle,
-  SvgIcon,
-  WalletAction,
-} from "../../components/styled/index.js";
+import { Link, SubTitle, WalletAction } from "../../components/styled/index.js";
+import { Time } from "../../components/Time.js";
 import { useTranslationContext } from "../../context/translation.js";
 import { Button } from "../../mui/Button.js";
-import { Grid } from "../../mui/Grid.js";
-import { TextField } from "../../mui/TextField.js";
-import editIcon from "../../svg/edit_24px.svg";
-import { ExchangeDetails, InvoiceDetails } from "../../wallet/Transaction.js";
 import { State } from "./index.js";
 
 export function LoadingUriView({ error }: State.LoadingUriError): VNode {
@@ -48,7 +39,10 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode {
 
 export function ReadyView({
   operationError,
+  cancel,
   accept,
+  expiration,
+  summary,
   amount,
 }: State.Ready): VNode {
   const { i18n } = useTranslationContext();
@@ -71,15 +65,31 @@ export function ReadyView({
       )}
       <section style={{ textAlign: "left" }}>
         <Part
+          title={<i18n.Translate>Subject</i18n.Translate>}
+          text={<div>{summary}</div>}
+        />
+        <Part
           title={<i18n.Translate>Amount</i18n.Translate>}
           text={<Amount value={amount} />}
         />
+        <Part
+          title={<i18n.Translate>Valid until</i18n.Translate>}
+          text={<Time timestamp={expiration} format="dd MMMM yyyy, HH:mm" />}
+          kind="neutral"
+        />
       </section>
       <section>
         <Button variant="contained" color="success" onClick={accept.onClick}>
-          <i18n.Translate>Pay</i18n.Translate>
+          <i18n.Translate>
+            Pay &nbsp; {<Amount value={amount} />}
+          </i18n.Translate>
         </Button>
       </section>
+      <section>
+        <Link upperCased onClick={cancel.onClick}>
+          <i18n.Translate>Cancel</i18n.Translate>
+        </Link>
+      </section>
     </WalletAction>
   );
 }
diff --git a/packages/taler-wallet-webextension/src/cta/Tip/index.ts b/packages/taler-wallet-webextension/src/cta/Tip/index.ts
index b174d5160..53c890b2c 100644
--- a/packages/taler-wallet-webextension/src/cta/Tip/index.ts
+++ b/packages/taler-wallet-webextension/src/cta/Tip/index.ts
@@ -30,7 +30,7 @@ import { AcceptedView, IgnoredView, LoadingUriView, ReadyView } from "./views.js
 
 export interface Props {
   talerTipUri?: string;
-  cancel: () => Promise<void>;
+  onCancel: () => Promise<void>;
 }
 
 export type State =
@@ -58,6 +58,7 @@ export namespace State {
     amount: AmountJson;
     exchangeBaseUrl: string;
     error: undefined;
+    cancel: ButtonHandler;
   }
 
   export interface Ignored extends BaseInfo {
@@ -70,7 +71,6 @@ export namespace State {
   export interface Ready extends BaseInfo {
     status: "ready";
     accept: ButtonHandler;
-    cancel: () => Promise<void>;
   }
 }
 
diff --git a/packages/taler-wallet-webextension/src/cta/Tip/state.ts b/packages/taler-wallet-webextension/src/cta/Tip/state.ts
index f18911f65..aa62bd5e3 100644
--- a/packages/taler-wallet-webextension/src/cta/Tip/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/Tip/state.ts
@@ -22,7 +22,7 @@ import * as wxApi from "../../wxApi.js";
 import { Props, State } from "./index.js";
 
 export function useComponentState(
-  { talerTipUri, cancel }: Props,
+  { talerTipUri, onCancel }: Props,
   api: typeof wxApi,
 ): State {
   const [tipIgnored, setTipIgnored] = useState(false);
@@ -58,6 +58,9 @@ export function useComponentState(
     exchangeBaseUrl: tip.exchangeBaseUrl,
     amount: Amounts.parseOrThrow(tip.tipAmountEffective),
     error: undefined,
+    cancel: {
+      onClick: onCancel
+    }
   }
 
   if (tipIgnored) {
@@ -80,7 +83,6 @@ export function useComponentState(
     accept: {
       onClick: doAccept,
     },
-    cancel,
   };
 }
 
diff --git a/packages/taler-wallet-webextension/src/cta/Tip/test.ts b/packages/taler-wallet-webextension/src/cta/Tip/test.ts
index 363652e47..ccb36572e 100644
--- a/packages/taler-wallet-webextension/src/cta/Tip/test.ts
+++ b/packages/taler-wallet-webextension/src/cta/Tip/test.ts
@@ -30,7 +30,7 @@ describe("Tip CTA states", () => {
   it("should tell the user that the URI is missing", async () => {
     const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
       mountHook(() =>
-        useComponentState({ talerTipUri: undefined, cancel: async () => { null } }, {
+        useComponentState({ talerTipUri: undefined, onCancel: async () => { null } }, {
           prepareTip: async () => ({}),
           acceptTip: async () => ({}),
         } as any),
@@ -62,7 +62,7 @@ describe("Tip CTA states", () => {
 
     const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
       mountHook(() =>
-        useComponentState({ talerTipUri: "taler://tip/asd", cancel: async () => { null } }, {
+        useComponentState({ talerTipUri: "taler://tip/asd", onCancel: async () => { null } }, {
           prepareTip: async () =>
           ({
             accepted: tipAccepted,
@@ -114,7 +114,7 @@ describe("Tip CTA states", () => {
   it("should be ignored after clicking the ignore button", async () => {
     const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
       mountHook(() =>
-        useComponentState({ talerTipUri: "taler://tip/asd", cancel: async () => { null } }, {
+        useComponentState({ talerTipUri: "taler://tip/asd", onCancel: async () => { null } }, {
           prepareTip: async () =>
           ({
             exchangeBaseUrl: "exchange url",
@@ -160,7 +160,7 @@ describe("Tip CTA states", () => {
   it("should render accepted if the tip has been used previously", async () => {
     const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
       mountHook(() =>
-        useComponentState({ talerTipUri: "taler://tip/asd", cancel: async () => { null } }, {
+        useComponentState({ talerTipUri: "taler://tip/asd", onCancel: async () => { null } }, {
           prepareTip: async () =>
           ({
             accepted: true,
diff --git a/packages/taler-wallet-webextension/src/cta/TransferCreate/index.ts b/packages/taler-wallet-webextension/src/cta/TransferCreate/index.ts
index fd034341e..ddd431c4e 100644
--- a/packages/taler-wallet-webextension/src/cta/TransferCreate/index.ts
+++ b/packages/taler-wallet-webextension/src/cta/TransferCreate/index.ts
@@ -14,17 +14,18 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
+import { AmountJson, TalerErrorDetail } from "@gnu-taler/taler-util";
 import { Loading } from "../../components/Loading.js";
 import { HookError } from "../../hooks/useAsyncAsHook.js";
+import { ButtonHandler, TextFieldHandler } from "../../mui/handlers.js";
 import { compose, StateViewMap } from "../../utils/index.js";
-import { LoadingUriView, ReadyView, ShowQrView } from "./views.js";
 import * as wxApi from "../../wxApi.js";
 import { useComponentState } from "./state.js";
-import { AmountJson, TalerErrorDetail } from "@gnu-taler/taler-util";
-import { ButtonHandler, SelectFieldHandler, TextFieldHandler } from "../../mui/handlers.js";
+import { LoadingUriView, ReadyView, ShowQrView } from "./views.js";
 
 export interface Props {
   amount: string;
+  onClose: () => Promise<void>;
 }
 
 export type State =
@@ -47,11 +48,11 @@ export namespace State {
 
   export interface BaseInfo {
     error: undefined;
+    cancel: ButtonHandler;
   }
   export interface ShowQr extends BaseInfo {
     status: "show-qr";
     talerUri: string;
-    close: () => void;
   }
   export interface Ready extends BaseInfo {
     status: "ready";
diff --git a/packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts b/packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts
index 9853f05ff..cee41b708 100644
--- a/packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts
@@ -21,7 +21,7 @@ import * as wxApi from "../../wxApi.js";
 import { Props, State } from "./index.js";
 
 export function useComponentState(
-  { amount: amountStr }: Props,
+  { amount: amountStr, onClose }: Props,
   api: typeof wxApi,
 ): State {
   const amount = Amounts.parseOrThrow(amountStr)
@@ -30,13 +30,14 @@ export function useComponentState(
   const [talerUri, setTalerUri] = useState("")
   const [operationError, setOperationError] = useState<TalerErrorDetail | undefined>(undefined)
 
-
   if (talerUri) {
     return {
       status: "show-qr",
       talerUri,
       error: undefined,
-      close: () => { null },
+      cancel: {
+        onClick: onClose,
+      },
     }
   }
 
@@ -62,7 +63,11 @@ export function useComponentState(
   return {
     status: "ready",
     invalid: !subject || Amounts.isZero(amount),
+    cancel: {
+      onClick: onClose,
+    },
     subject: {
+      error: !subject ? "cant be empty" : undefined,
       value: subject,
       onInput: async (e) => setSubject(e)
     },
diff --git a/packages/taler-wallet-webextension/src/cta/TransferCreate/stories.tsx b/packages/taler-wallet-webextension/src/cta/TransferCreate/stories.tsx
index 1e528df73..be44ac8c5 100644
--- a/packages/taler-wallet-webextension/src/cta/TransferCreate/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/TransferCreate/stories.tsx
@@ -29,9 +29,7 @@ export default {
 export const ShowQr = createExample(ShowQrView, {
   talerUri:
     "taler://pay-push/exchange.taler.ar/HS585JK0QCXHJ8Z8QWZA3EBAY5WY7XNC1RR2MHJXSH2Z4WP0YPJ0",
-  close: () => {
-    null;
-  },
+  cancel: {},
 });
 
 export const Ready = createExample(ReadyView, {
@@ -40,6 +38,7 @@ export const Ready = createExample(ReadyView, {
     value: 1,
     fraction: 0,
   },
+  cancel: {},
   toBeReceived: {
     currency: "ARS",
     value: 1,
diff --git a/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx b/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx
index ebdf1e746..a585cbaef 100644
--- a/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx
@@ -15,6 +15,7 @@
  */
 
 import { h, VNode } from "preact";
+import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js";
 import { LoadingError } from "../../components/LoadingError.js";
 import { LogoHeader } from "../../components/LogoHeader.js";
 import { Part } from "../../components/Part.js";
@@ -38,7 +39,7 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode {
   );
 }
 
-export function ShowQrView({ talerUri, close }: State.ShowQr): VNode {
+export function ShowQrView({ talerUri, cancel }: State.ShowQr): VNode {
   const { i18n } = useTranslationContext();
   return (
     <WalletAction>
@@ -51,7 +52,7 @@ export function ShowQrView({ talerUri, close }: State.ShowQr): VNode {
         <QR text={talerUri} />
       </section>
       <section>
-        <Link upperCased onClick={close}>
+        <Link upperCased onClick={cancel.onClick}>
           <i18n.Translate>Close</i18n.Translate>
         </Link>
       </section>
@@ -64,7 +65,9 @@ export function ReadyView({
   toBeReceived,
   chosenAmount,
   showQr,
+  operationError,
   copyToClipboard,
+  cancel,
   invalid,
 }: State.Ready): VNode {
   const { i18n } = useTranslationContext();
@@ -74,6 +77,16 @@ export function ReadyView({
       <SubTitle>
         <i18n.Translate>Digital cash transfer</i18n.Translate>
       </SubTitle>
+      {operationError && (
+        <ErrorTalerOperation
+          title={
+            <i18n.Translate>
+              Could not finish the transfer creation
+            </i18n.Translate>
+          }
+          error={operationError}
+        />
+      )}
       <section style={{ textAlign: "left" }}>
         <TextField
           label="Subject"
@@ -112,6 +125,13 @@ export function ReadyView({
           </Grid>
         </Grid>
       </section>
+      <section>
+        <section>
+          <Link upperCased onClick={cancel.onClick}>
+            <i18n.Translate>Cancel</i18n.Translate>
+          </Link>
+        </section>
+      </section>
     </WalletAction>
   );
 }
diff --git a/packages/taler-wallet-webextension/src/cta/TransferPickup/index.ts b/packages/taler-wallet-webextension/src/cta/TransferPickup/index.ts
index 603200747..08428851e 100644
--- a/packages/taler-wallet-webextension/src/cta/TransferPickup/index.ts
+++ b/packages/taler-wallet-webextension/src/cta/TransferPickup/index.ts
@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { AmountJson, TalerErrorDetail } from "@gnu-taler/taler-util";
+import { AbsoluteTime, AmountJson, TalerErrorDetail } from "@gnu-taler/taler-util";
 import { Loading } from "../../components/Loading.js";
 import { HookError } from "../../hooks/useAsyncAsHook.js";
 import { ButtonHandler } from "../../mui/handlers.js";
@@ -25,6 +25,7 @@ import { LoadingUriView, ReadyView } from "./views.js";
 
 export interface Props {
   talerPayPushUri: string;
+  onClose: () => Promise<void>;
 }
 
 export type State =
@@ -46,10 +47,13 @@ export namespace State {
 
   export interface BaseInfo {
     error: undefined;
+    cancel: ButtonHandler;
   }
   export interface Ready extends BaseInfo {
     status: "ready";
     amount: AmountJson,
+    summary: string | undefined;
+    expiration: AbsoluteTime | undefined;
     error: undefined;
     accept: ButtonHandler;
     operationError?: TalerErrorDetail;
diff --git a/packages/taler-wallet-webextension/src/cta/TransferPickup/state.ts b/packages/taler-wallet-webextension/src/cta/TransferPickup/state.ts
index a16389709..ce4c7236d 100644
--- a/packages/taler-wallet-webextension/src/cta/TransferPickup/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/TransferPickup/state.ts
@@ -14,7 +14,7 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { Amounts, TalerErrorDetail } from "@gnu-taler/taler-util";
+import { AbsoluteTime, Amounts, TalerErrorDetail, TalerProtocolTimestamp } from "@gnu-taler/taler-util";
 import { TalerError } from "@gnu-taler/taler-wallet-core";
 import { useState } from "preact/hooks";
 import { useAsyncAsHook } from "../../hooks/useAsyncAsHook.js";
@@ -22,7 +22,7 @@ import * as wxApi from "../../wxApi.js";
 import { Props, State } from "./index.js";
 
 export function useComponentState(
-  { talerPayPushUri }: Props,
+  { talerPayPushUri, onClose }: Props,
   api: typeof wxApi,
 ): State {
   const hook = useAsyncAsHook(async () => {
@@ -45,13 +45,18 @@ export function useComponentState(
     };
   }
 
-  const { amount, peerPushPaymentIncomingId } = hook.response
+  const { amount: purseAmount, contractTerms, peerPushPaymentIncomingId } = hook.response
+
+  const amount: string = contractTerms?.amount
+  const summary: string | undefined = contractTerms?.summary
+  const expiration: TalerProtocolTimestamp | undefined = contractTerms?.purse_expiration
 
   async function accept(): Promise<void> {
     try {
       const resp = await api.acceptPeerPushPayment({
         peerPushPaymentIncomingId
       })
+      await onClose()
     } catch (e) {
       if (e instanceof TalerError) {
         setOperationError(e.errorDetail)
@@ -67,6 +72,11 @@ export function useComponentState(
     accept: {
       onClick: accept
     },
+    summary,
+    expiration: expiration ? AbsoluteTime.fromTimestamp(expiration) : undefined,
+    cancel: {
+      onClick: onClose
+    },
     operationError
   }
 }
diff --git a/packages/taler-wallet-webextension/src/cta/TransferPickup/stories.tsx b/packages/taler-wallet-webextension/src/cta/TransferPickup/stories.tsx
index 7a3ccb60d..425d7de36 100644
--- a/packages/taler-wallet-webextension/src/cta/TransferPickup/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/TransferPickup/stories.tsx
@@ -33,4 +33,5 @@ export const Ready = createExample(ReadyView, {
     fraction: 0,
   },
   accept: {},
+  cancel: {},
 });
diff --git a/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx b/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx
index 22ef8c776..c43b0ff52 100644
--- a/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/TransferPickup/views.tsx
@@ -20,7 +20,8 @@ import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js";
 import { LoadingError } from "../../components/LoadingError.js";
 import { LogoHeader } from "../../components/LogoHeader.js";
 import { Part } from "../../components/Part.js";
-import { SubTitle, WalletAction } from "../../components/styled/index.js";
+import { Link, SubTitle, WalletAction } from "../../components/styled/index.js";
+import { Time } from "../../components/Time.js";
 import { useTranslationContext } from "../../context/translation.js";
 import { Button } from "../../mui/Button.js";
 import { State } from "./index.js";
@@ -38,7 +39,10 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode {
 
 export function ReadyView({
   accept,
+  summary,
+  expiration,
   amount,
+  cancel,
   operationError,
 }: State.Ready): VNode {
   const { i18n } = useTranslationContext();
@@ -60,15 +64,31 @@ export function ReadyView({
       )}
       <section style={{ textAlign: "left" }}>
         <Part
+          title={<i18n.Translate>Subject</i18n.Translate>}
+          text={<div>{summary}</div>}
+        />
+        <Part
           title={<i18n.Translate>Amount</i18n.Translate>}
           text={<Amount value={amount} />}
         />
+        <Part
+          title={<i18n.Translate>Valid until</i18n.Translate>}
+          text={<Time timestamp={expiration} format="dd MMMM yyyy, HH:mm" />}
+          kind="neutral"
+        />
       </section>
       <section>
         <Button variant="contained" color="success" onClick={accept.onClick}>
-          <i18n.Translate>Pickup</i18n.Translate>
+          <i18n.Translate>
+            Receive &nbsp; {<Amount value={amount} />}
+          </i18n.Translate>
         </Button>
       </section>
+      <section>
+        <Link upperCased onClick={cancel.onClick}>
+          <i18n.Translate>Cancel</i18n.Translate>
+        </Link>
+      </section>
     </WalletAction>
   );
 }