aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--packages/taler-wallet-webextension/src/cta/InvoiceCreate/index.ts16
-rw-r--r--packages/taler-wallet-webextension/src/cta/InvoiceCreate/state.ts19
-rw-r--r--packages/taler-wallet-webextension/src/cta/InvoiceCreate/stories.tsx8
-rw-r--r--packages/taler-wallet-webextension/src/cta/InvoiceCreate/views.tsx39
-rw-r--r--packages/taler-wallet-webextension/src/cta/TransferCreate/index.ts14
-rw-r--r--packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts15
-rw-r--r--packages/taler-wallet-webextension/src/cta/TransferCreate/stories.tsx8
-rw-r--r--packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx39
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>