invoice and transfer details

4 files changed, 30 insertions, 8 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>
   );
 }