add invoice|transfer created view
This commit is contained in:
parent
91d5d55edc
commit
d6a172c4a0
@ -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,
|
||||
};
|
||||
|
||||
|
@ -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)
|
||||
|
@ -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: {},
|
||||
});
|
||||
|
@ -45,18 +45,26 @@ 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>
|
||||
@ -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}>
|
||||
|
@ -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,
|
||||
};
|
||||
|
||||
|
@ -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)
|
||||
|
@ -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 () => {
|
||||
|
@ -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,18 +38,26 @@ 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>
|
||||
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user