withdraw call to action

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 &nbsp; <Amount value={state.amount} />
+          </i18n.Translate>
         </Button>
       </section>
+      <section>
+        <Link upperCased onClick={state.cancel}>
+          <i18n.Translate>Cancel</i18n.Translate>
+        </Link>
+      </section>
     </WalletAction>
   );
 }