diff options
Diffstat (limited to 'packages/taler-wallet-webextension/src/cta/Refund')
4 files changed, 22 insertions, 8 deletions
diff --git a/packages/taler-wallet-webextension/src/cta/Refund/index.ts b/packages/taler-wallet-webextension/src/cta/Refund/index.ts index b122559a9..d1f808f00 100644 --- a/packages/taler-wallet-webextension/src/cta/Refund/index.ts +++ b/packages/taler-wallet-webextension/src/cta/Refund/index.ts @@ -27,6 +27,7 @@ import { CompletedView, IgnoredView, InProgressView, LoadingUriView, ReadyView } export interface Props { talerRefundUri?: string; + cancel: () => Promise<void>; } export type State = @@ -64,6 +65,7 @@ export namespace State { accept: ButtonHandler; ignore: ButtonHandler; orderId: string; + cancel: () => Promise<void>; } export interface Ignored extends BaseInfo { diff --git a/packages/taler-wallet-webextension/src/cta/Refund/state.ts b/packages/taler-wallet-webextension/src/cta/Refund/state.ts index f8ce71a13..e520be8e5 100644 --- a/packages/taler-wallet-webextension/src/cta/Refund/state.ts +++ b/packages/taler-wallet-webextension/src/cta/Refund/state.ts @@ -22,7 +22,7 @@ import * as wxApi from "../../wxApi.js"; import { Props, State } from "./index.js"; export function useComponentState( - { talerRefundUri }: Props, + { talerRefundUri, cancel }: Props, api: typeof wxApi, ): State { const [ignored, setIgnored] = useState(false); @@ -100,5 +100,6 @@ export function useComponentState( ignore: { onClick: doIgnore, }, + cancel, }; } diff --git a/packages/taler-wallet-webextension/src/cta/Refund/test.ts b/packages/taler-wallet-webextension/src/cta/Refund/test.ts index 04c83b8f1..e238078db 100644 --- a/packages/taler-wallet-webextension/src/cta/Refund/test.ts +++ b/packages/taler-wallet-webextension/src/cta/Refund/test.ts @@ -33,7 +33,7 @@ describe("Refund CTA states", () => { it("should tell the user that the URI is missing", async () => { const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = mountHook(() => - useComponentState({ talerRefundUri: undefined }, { + useComponentState({ talerRefundUri: undefined, cancel: async () => { null } }, { prepareRefund: async () => ({}), applyRefund: async () => ({}), onUpdateNotification: async () => ({}), @@ -64,7 +64,7 @@ describe("Refund CTA states", () => { it("should be ready after loading", async () => { const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = mountHook(() => - useComponentState({ talerRefundUri: "taler://refund/asdasdas" }, { + useComponentState({ talerRefundUri: "taler://refund/asdasdas", cancel: async () => { null } }, { prepareRefund: async () => ({ effectivePaid: "EUR:2", @@ -113,7 +113,7 @@ describe("Refund CTA states", () => { it("should be ignored after clicking the ignore button", async () => { const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = mountHook(() => - useComponentState({ talerRefundUri: "taler://refund/asdasdas" }, { + useComponentState({ talerRefundUri: "taler://refund/asdasdas", cancel: async () => { null } }, { prepareRefund: async () => ({ effectivePaid: "EUR:2", @@ -189,7 +189,7 @@ describe("Refund CTA states", () => { const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } = mountHook(() => - useComponentState({ talerRefundUri: "taler://refund/asdasdas" }, { + useComponentState({ talerRefundUri: "taler://refund/asdasdas", cancel: async () => { null } }, { prepareRefund: async () => ({ awaiting: Amounts.stringify(awaiting), diff --git a/packages/taler-wallet-webextension/src/cta/Refund/views.tsx b/packages/taler-wallet-webextension/src/cta/Refund/views.tsx index e0c7bb553..3a8148e99 100644 --- a/packages/taler-wallet-webextension/src/cta/Refund/views.tsx +++ b/packages/taler-wallet-webextension/src/cta/Refund/views.tsx @@ -20,7 +20,7 @@ import { Amount } from "../../components/Amount.js"; import { LoadingError } from "../../components/LoadingError.js"; import { LogoHeader } from "../../components/LogoHeader.js"; import { Part } from "../../components/Part.js"; -import { SubTitle, WalletAction } from "../../components/styled/index.js"; +import { Link, SubTitle, WalletAction } from "../../components/styled/index.js"; import { useTranslationContext } from "../../context/translation.js"; import { Button } from "../../mui/Button.js"; import { ProductList } from "../Payment/views.js"; @@ -163,10 +163,21 @@ export function ReadyView(state: State.Ready): VNode { </section> ) : undefined} <section> - <Button variant="contained" onClick={state.accept.onClick}> - <i18n.Translate>Confirm refund</i18n.Translate> + <Button + variant="contained" + color="success" + onClick={state.accept.onClick} + > + <i18n.Translate> + Receive <Amount value={state.amount} /> + </i18n.Translate> </Button> </section> + <section> + <Link upperCased onClick={state.cancel}> + <i18n.Translate>Cancel</i18n.Translate> + </Link> + </section> </WalletAction> ); } |