add invoice|transfer created view

8 files changed, 78 insertions, 80 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/index.ts b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/index.ts
index 0ef341fa9..0eefb2092 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/index.ts
+++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/index.ts
@@ -17,11 +17,11 @@
 import { Loading } from "../../components/Loading.js";
 import { HookError } from "../../hooks/useAsyncAsHook.js";
 import { compose, StateViewMap } from "../../utils/index.js";
-import { LoadingUriView, ReadyView, ShowQrView } from "./views.js";
+import { LoadingUriView, ReadyView, CreatedView } 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 { ButtonHandler, TextFieldHandler } from "../../mui/handlers.js";
 
 export interface Props {
   amount: string;
@@ -31,7 +31,7 @@ export interface Props {
 export type State =
   | State.Loading
   | State.LoadingUriError
-  | State.ShowQr
+  | State.Created
   | State.Ready;
 
 export namespace State {
@@ -50,14 +50,14 @@ export namespace State {
     error: undefined;
     cancel: ButtonHandler;
   }
-  export interface ShowQr extends BaseInfo {
-    status: "show-qr";
+  export interface Created extends BaseInfo {
+    status: "created";
     talerUri: string;
+    copyToClipboard: ButtonHandler;
   }
   export interface Ready extends BaseInfo {
     status: "ready";
-    showQr: ButtonHandler;
-    copyToClipboard: ButtonHandler;
+    create: ButtonHandler;
     subject: TextFieldHandler;
     toBeReceived: AmountJson,
     chosenAmount: AmountJson,
@@ -71,7 +71,7 @@ export namespace State {
 const viewMapping: StateViewMap<State> = {
   loading: Loading,
   "loading-uri": LoadingUriView,
-  "show-qr": ShowQrView,
+  "created": CreatedView,
   "ready": ReadyView,
 };
 
diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts
index f6a0847b2..804d216eb 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts
@@ -50,14 +50,17 @@ export function useComponentState(
 
   if (talerUri) {
     return {
-      status: "show-qr",
+      status: "created",
       talerUri,
       error: undefined,
       cancel: {
         onClick: onClose
-      }
-      // chosenAmount: amount,
-      // toBeReceived: amount,
+      },
+      copyToClipboard: {
+        onClick: async () => {
+          navigator.clipboard.writeText(talerUri);
+        }
+      },
     }
   }
 
@@ -95,13 +98,7 @@ export function useComponentState(
     },
     invalid: !subject || Amounts.isZero(amount),
     exchangeUrl: selected.exchangeBaseUrl,
-    copyToClipboard: {
-      onClick: async () => {
-        const uri = await accept();
-        navigator.clipboard.writeText(uri || "");
-      }
-    },
-    showQr: {
+    create: {
       onClick: async () => {
         const uri = await accept();
         setTalerUri(uri)
diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/stories.tsx b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/stories.tsx
index 970b51b55..0adc29e78 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/stories.tsx
@@ -20,16 +20,17 @@
  */
 
 import { createExample } from "../../test-utils.js";
-import { ReadyView, ShowQrView } from "./views.js";
+import { ReadyView, CreatedView } from "./views.js";
 
 export default {
   title: "wallet/invoice create",
 };
 
-export const ShowQr = createExample(ShowQrView, {
+export const ShowQr = createExample(CreatedView, {
   talerUri:
     "taler://pay-pull/exchange.taler.ar/HS585JK0QCXHJ8Z8QWZA3EBAY5WY7XNC1RR2MHJXSH2Z4WP0YPJ0",
   cancel: {},
+  copyToClipboard: {},
 });
 
 export const Ready = createExample(ReadyView, {
@@ -51,6 +52,5 @@ export const Ready = createExample(ReadyView, {
       null;
     },
   },
-  copyToClipboard: {},
-  showQr: {},
+  create: {},
 });
diff --git a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx
index 3de36b6e9..d3d2c68e4 100644
--- a/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx
@@ -45,19 +45,27 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode {
   );
 }
 
-export function ShowQrView({ talerUri, cancel }: State.ShowQr): VNode {
+export function CreatedView({
+  talerUri,
+  copyToClipboard,
+  cancel,
+}: State.Created): VNode {
   const { i18n } = useTranslationContext();
   return (
     <WalletAction>
       <LogoHeader />
       <SubTitle>
-        <i18n.Translate>Digital invoice</i18n.Translate>
+        <i18n.Translate>Digital cash invoice</i18n.Translate>
       </SubTitle>
       <section>
-        <p>Scan this QR code with the wallet</p>
+        <p>Show this QR to pay the invoice</p>
         <QR text={talerUri} />
       </section>
       <section>
+        or
+        <Button onClick={copyToClipboard.onClick}>Copy the invoice URI</Button>
+      </section>
+      <section>
         <Link upperCased onClick={cancel.onClick}>
           <i18n.Translate>Close</i18n.Translate>
         </Link>
@@ -70,10 +78,9 @@ export function ReadyView({
   invalid,
   exchangeUrl,
   subject,
-  showQr,
   cancel,
   operationError,
-  copyToClipboard,
+  create,
   toBeReceived,
   chosenAmount,
 }: State.Ready): VNode {
@@ -142,20 +149,14 @@ export function ReadyView({
         />
       </section>
       <section>
-        <p>How do you want to send the invoice?</p>
-
-        <Grid item container columns={1} spacing={1}>
-          <Grid item xs={1}>
-            <Button disabled={invalid} onClick={copyToClipboard.onClick}>
-              Copy request URI to clipboard
-            </Button>
-          </Grid>
-          <Grid item xs={1}>
-            <Button disabled={invalid} onClick={showQr.onClick}>
-              Show QR
-            </Button>
-          </Grid>
-        </Grid>
+        <Button
+          disabled={invalid}
+          onClick={create.onClick}
+          variant="contained"
+          color="success"
+        >
+          Create
+        </Button>
       </section>
       <section>
         <Link upperCased onClick={cancel.onClick}>
diff --git a/packages/taler-wallet-webextension/src/cta/TransferCreate/index.ts b/packages/taler-wallet-webextension/src/cta/TransferCreate/index.ts
index ddd431c4e..c23d42e11 100644
--- a/packages/taler-wallet-webextension/src/cta/TransferCreate/index.ts
+++ b/packages/taler-wallet-webextension/src/cta/TransferCreate/index.ts
@@ -21,7 +21,7 @@ import { ButtonHandler, TextFieldHandler } from "../../mui/handlers.js";
 import { compose, StateViewMap } from "../../utils/index.js";
 import * as wxApi from "../../wxApi.js";
 import { useComponentState } from "./state.js";
-import { LoadingUriView, ReadyView, ShowQrView } from "./views.js";
+import { LoadingUriView, ReadyView, CreatedView } from "./views.js";
 
 export interface Props {
   amount: string;
@@ -31,7 +31,7 @@ export interface Props {
 export type State =
   | State.Loading
   | State.LoadingUriError
-  | State.ShowQr
+  | State.Created
   | State.Ready;
 
 export namespace State {
@@ -50,15 +50,15 @@ export namespace State {
     error: undefined;
     cancel: ButtonHandler;
   }
-  export interface ShowQr extends BaseInfo {
-    status: "show-qr";
+  export interface Created extends BaseInfo {
+    status: "created";
     talerUri: string;
+    copyToClipboard: ButtonHandler;
   }
   export interface Ready extends BaseInfo {
     status: "ready";
-    showQr: ButtonHandler;
     invalid: boolean;
-    copyToClipboard: ButtonHandler;
+    create: ButtonHandler;
     toBeReceived: AmountJson,
     chosenAmount: AmountJson,
     subject: TextFieldHandler,
@@ -70,7 +70,7 @@ export namespace State {
 const viewMapping: StateViewMap<State> = {
   loading: Loading,
   "loading-uri": LoadingUriView,
-  "show-qr": ShowQrView,
+  "created": CreatedView,
   "ready": ReadyView,
 };
 
diff --git a/packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts b/packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts
index cee41b708..f11526c0e 100644
--- a/packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts
@@ -32,12 +32,17 @@ export function useComponentState(
 
   if (talerUri) {
     return {
-      status: "show-qr",
+      status: "created",
       talerUri,
       error: undefined,
       cancel: {
         onClick: onClose,
       },
+      copyToClipboard: {
+        onClick: async () => {
+          navigator.clipboard.writeText(talerUri);
+        }
+      },
     }
   }
 
@@ -71,13 +76,7 @@ export function useComponentState(
       value: subject,
       onInput: async (e) => setSubject(e)
     },
-    copyToClipboard: {
-      onClick: async () => {
-        const uri = await accept();
-        navigator.clipboard.writeText(uri || "");
-      }
-    },
-    showQr: {
+    create: {
       onClick: async () => {
         const uri = await accept();
         setTalerUri(uri)
diff --git a/packages/taler-wallet-webextension/src/cta/TransferCreate/stories.tsx b/packages/taler-wallet-webextension/src/cta/TransferCreate/stories.tsx
index be44ac8c5..c6ce301a9 100644
--- a/packages/taler-wallet-webextension/src/cta/TransferCreate/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/TransferCreate/stories.tsx
@@ -20,16 +20,17 @@
  */
 
 import { createExample } from "../../test-utils.js";
-import { ReadyView, ShowQrView } from "./views.js";
+import { ReadyView, CreatedView } from "./views.js";
 
 export default {
   title: "wallet/transfer create",
 };
 
-export const ShowQr = createExample(ShowQrView, {
+export const ShowQr = createExample(CreatedView, {
   talerUri:
     "taler://pay-push/exchange.taler.ar/HS585JK0QCXHJ8Z8QWZA3EBAY5WY7XNC1RR2MHJXSH2Z4WP0YPJ0",
   cancel: {},
+  copyToClipboard: {},
 });
 
 export const Ready = createExample(ReadyView, {
@@ -38,14 +39,13 @@ export const Ready = createExample(ReadyView, {
     value: 1,
     fraction: 0,
   },
+  create: {},
   cancel: {},
   toBeReceived: {
     currency: "ARS",
     value: 1,
     fraction: 0,
   },
-  copyToClipboard: {},
-  showQr: {},
   subject: {
     value: "the subject",
     onInput: async () => {
diff --git a/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx b/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx
index a585cbaef..51121d4ca 100644
--- a/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx
@@ -23,7 +23,6 @@ import { QR } from "../../components/QR.js";
 import { Link, SubTitle, WalletAction } from "../../components/styled/index.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 { TransferDetails } from "../../wallet/Transaction.js";
 import { State } from "./index.js";
@@ -39,19 +38,27 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode {
   );
 }
 
-export function ShowQrView({ talerUri, cancel }: State.ShowQr): VNode {
+export function CreatedView({
+  talerUri,
+  copyToClipboard,
+  cancel,
+}: State.Created): VNode {
   const { i18n } = useTranslationContext();
   return (
     <WalletAction>
       <LogoHeader />
       <SubTitle>
-        <i18n.Translate>Digital invoice</i18n.Translate>
+        <i18n.Translate>Digital cash transfer</i18n.Translate>
       </SubTitle>
       <section>
-        <p>Scan this QR code with the wallet</p>
+        <p>Show this QR to receive the transfer</p>
         <QR text={talerUri} />
       </section>
       <section>
+        or
+        <Button onClick={copyToClipboard.onClick}>Copy the transfer URI</Button>
+      </section>
+      <section>
         <Link upperCased onClick={cancel.onClick}>
           <i18n.Translate>Close</i18n.Translate>
         </Link>
@@ -64,9 +71,8 @@ export function ReadyView({
   subject,
   toBeReceived,
   chosenAmount,
-  showQr,
+  create,
   operationError,
-  copyToClipboard,
   cancel,
   invalid,
 }: State.Ready): VNode {
@@ -111,19 +117,14 @@ export function ReadyView({
       </section>
       <section>
         <p>How do you want to transfer?</p>
-
-        <Grid item container columns={1} spacing={1}>
-          <Grid item xs={1}>
-            <Button disabled={invalid} onClick={copyToClipboard.onClick}>
-              Copy transfer URI to clipboard
-            </Button>
-          </Grid>
-          <Grid item xs={1}>
-            <Button disabled={invalid} onClick={showQr.onClick}>
-              Show QR
-            </Button>
-          </Grid>
-        </Grid>
+        <Button
+          disabled={invalid}
+          onClick={create.onClick}
+          variant="contained"
+          color="success"
+        >
+          Create
+        </Button>
       </section>
       <section>
         <section>