diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/cta/TransferCreate')
4 files changed, 37 insertions, 12 deletions
diff --git a/packages/taler-wallet-webextension/src/cta/TransferCreate/index.ts b/packages/taler-wallet-webextension/src/cta/TransferCreate/index.ts index fd034341e..ddd431c4e 100644 --- a/packages/taler-wallet-webextension/src/cta/TransferCreate/index.ts +++ b/packages/taler-wallet-webextension/src/cta/TransferCreate/index.ts @@ -14,17 +14,18 @@ GNU Taler; see the file COPYING. If not, see <http://www.gnu.org/licenses/> */ +import { AmountJson, TalerErrorDetail } from "@gnu-taler/taler-util"; import { Loading } from "../../components/Loading.js"; import { HookError } from "../../hooks/useAsyncAsHook.js"; +import { ButtonHandler, TextFieldHandler } from "../../mui/handlers.js"; import { compose, StateViewMap } from "../../utils/index.js"; -import { LoadingUriView, ReadyView, ShowQrView } 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 { LoadingUriView, ReadyView, ShowQrView } from "./views.js"; export interface Props { amount: string; + onClose: () => Promise<void>; } export type State = @@ -47,11 +48,11 @@ export namespace State { export interface BaseInfo { error: undefined; + cancel: ButtonHandler; } export interface ShowQr extends BaseInfo { status: "show-qr"; talerUri: string; - close: () => void; } export interface Ready extends BaseInfo { status: "ready"; diff --git a/packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts b/packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts index 9853f05ff..cee41b708 100644 --- a/packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts +++ b/packages/taler-wallet-webextension/src/cta/TransferCreate/state.ts @@ -21,7 +21,7 @@ import * as wxApi from "../../wxApi.js"; import { Props, State } from "./index.js"; export function useComponentState( - { amount: amountStr }: Props, + { amount: amountStr, onClose }: Props, api: typeof wxApi, ): State { const amount = Amounts.parseOrThrow(amountStr) @@ -30,13 +30,14 @@ export function useComponentState( const [talerUri, setTalerUri] = useState("") const [operationError, setOperationError] = useState<TalerErrorDetail | undefined>(undefined) - if (talerUri) { return { status: "show-qr", talerUri, error: undefined, - close: () => { null }, + cancel: { + onClick: onClose, + }, } } @@ -62,7 +63,11 @@ export function useComponentState( return { status: "ready", invalid: !subject || Amounts.isZero(amount), + cancel: { + onClick: onClose, + }, subject: { + error: !subject ? "cant be empty" : undefined, value: subject, onInput: async (e) => setSubject(e) }, diff --git a/packages/taler-wallet-webextension/src/cta/TransferCreate/stories.tsx b/packages/taler-wallet-webextension/src/cta/TransferCreate/stories.tsx index 1e528df73..be44ac8c5 100644 --- a/packages/taler-wallet-webextension/src/cta/TransferCreate/stories.tsx +++ b/packages/taler-wallet-webextension/src/cta/TransferCreate/stories.tsx @@ -29,9 +29,7 @@ export default { export const ShowQr = createExample(ShowQrView, { talerUri: "taler://pay-push/exchange.taler.ar/HS585JK0QCXHJ8Z8QWZA3EBAY5WY7XNC1RR2MHJXSH2Z4WP0YPJ0", - close: () => { - null; - }, + cancel: {}, }); export const Ready = createExample(ReadyView, { @@ -40,6 +38,7 @@ export const Ready = createExample(ReadyView, { value: 1, fraction: 0, }, + cancel: {}, toBeReceived: { currency: "ARS", value: 1, diff --git a/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx b/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx index ebdf1e746..a585cbaef 100644 --- a/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx +++ b/packages/taler-wallet-webextension/src/cta/TransferCreate/views.tsx @@ -15,6 +15,7 @@ */ import { h, VNode } from "preact"; +import { ErrorTalerOperation } from "../../components/ErrorTalerOperation.js"; import { LoadingError } from "../../components/LoadingError.js"; import { LogoHeader } from "../../components/LogoHeader.js"; import { Part } from "../../components/Part.js"; @@ -38,7 +39,7 @@ export function LoadingUriView({ error }: State.LoadingUriError): VNode { ); } -export function ShowQrView({ talerUri, close }: State.ShowQr): VNode { +export function ShowQrView({ talerUri, cancel }: State.ShowQr): VNode { const { i18n } = useTranslationContext(); return ( <WalletAction> @@ -51,7 +52,7 @@ export function ShowQrView({ talerUri, close }: State.ShowQr): VNode { <QR text={talerUri} /> </section> <section> - <Link upperCased onClick={close}> + <Link upperCased onClick={cancel.onClick}> <i18n.Translate>Close</i18n.Translate> </Link> </section> @@ -64,7 +65,9 @@ export function ReadyView({ toBeReceived, chosenAmount, showQr, + operationError, copyToClipboard, + cancel, invalid, }: State.Ready): VNode { const { i18n } = useTranslationContext(); @@ -74,6 +77,16 @@ export function ReadyView({ <SubTitle> <i18n.Translate>Digital cash transfer</i18n.Translate> </SubTitle> + {operationError && ( + <ErrorTalerOperation + title={ + <i18n.Translate> + Could not finish the transfer creation + </i18n.Translate> + } + error={operationError} + /> + )} <section style={{ textAlign: "left" }}> <TextField label="Subject" @@ -112,6 +125,13 @@ export function ReadyView({ </Grid> </Grid> </section> + <section> + <section> + <Link upperCased onClick={cancel.onClick}> + <i18n.Translate>Cancel</i18n.Translate> + </Link> + </section> + </section> </WalletAction> ); } |