From d6a172c4a00b615dce31630bf65e6d62b30f608e Mon Sep 17 00:00:00 2001 From: Sebastian Date: Thu, 1 Sep 2022 10:03:23 -0300 Subject: add invoice|transfer created view --- .../src/cta/InvoiceCreate/index.ts | 16 ++++----- .../src/cta/InvoiceCreate/state.ts | 19 +++++------ .../src/cta/InvoiceCreate/stories.tsx | 8 ++--- .../src/cta/InvoiceCreate/views.tsx | 39 +++++++++++----------- .../src/cta/TransferCreate/index.ts | 14 ++++---- .../src/cta/TransferCreate/state.ts | 15 ++++----- .../src/cta/TransferCreate/stories.tsx | 8 ++--- .../src/cta/TransferCreate/views.tsx | 39 +++++++++++----------- 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 = { 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,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 ( - Digital invoice + Digital cash invoice
-

Scan this QR code with the wallet

+

Show this QR to pay the invoice

+
+ or + +
Close @@ -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({ />
-

How do you want to send the invoice?

- - - - - - - - - +
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 = { 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,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 ( - Digital invoice + Digital cash transfer
-

Scan this QR code with the wallet

+

Show this QR to receive the transfer

+
+ or + +
Close @@ -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({

How do you want to transfer?

- - - - - - - - - +
-- cgit v1.2.3