diff options
author | Sebastian <sebasjm@gmail.com> | 2022-09-01 10:03:23 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-09-01 10:03:23 -0300 |
commit | d6a172c4a00b615dce31630bf65e6d62b30f608e (patch) | |
tree | c8c714b01e0cf9a34f229a63a7e2ca6bb336ad0c /packages/taler-wallet-webextension/src/cta | |
parent | 91d5d55edc36bde8ac860fd56b0fd2dcb93b150a (diff) | |
download | wallet-core-d6a172c4a00b615dce31630bf65e6d62b30f608e.tar.xz |
add invoice|transfer created view
Diffstat (limited to 'packages/taler-wallet-webextension/src/cta')
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> |