diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/cta/InvoiceCreate')
4 files changed, 40 insertions, 42 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}> |