withdraw call to action

5 files changed, 25 insertions, 28 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/Tip/index.ts b/packages/taler-wallet-webextension/src/cta/Tip/index.ts
index 24a7b1cff..b174d5160 100644
--- a/packages/taler-wallet-webextension/src/cta/Tip/index.ts
+++ b/packages/taler-wallet-webextension/src/cta/Tip/index.ts
@@ -30,6 +30,7 @@ import { AcceptedView, IgnoredView, LoadingUriView, ReadyView } from "./views.js
 
 export interface Props {
   talerTipUri?: string;
+  cancel: () => Promise<void>;
 }
 
 export type State =
@@ -69,7 +70,7 @@ export namespace State {
   export interface Ready extends BaseInfo {
     status: "ready";
     accept: ButtonHandler;
-    ignore: ButtonHandler;
+    cancel: () => Promise<void>;
   }
 }
 
diff --git a/packages/taler-wallet-webextension/src/cta/Tip/state.ts b/packages/taler-wallet-webextension/src/cta/Tip/state.ts
index e5511074e..f18911f65 100644
--- a/packages/taler-wallet-webextension/src/cta/Tip/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/Tip/state.ts
@@ -22,7 +22,7 @@ import * as wxApi from "../../wxApi.js";
 import { Props, State } from "./index.js";
 
 export function useComponentState(
-  { talerTipUri }: Props,
+  { talerTipUri, cancel }: Props,
   api: typeof wxApi,
 ): State {
   const [tipIgnored, setTipIgnored] = useState(false);
@@ -53,10 +53,6 @@ export function useComponentState(
     tipInfo.retry();
   };
 
-  const doIgnore = async (): Promise<void> => {
-    setTipIgnored(true);
-  };
-
   const baseInfo = {
     merchantBaseUrl: tip.merchantBaseUrl,
     exchangeBaseUrl: tip.exchangeBaseUrl,
@@ -84,9 +80,7 @@ export function useComponentState(
     accept: {
       onClick: doAccept,
     },
-    ignore: {
-      onClick: doIgnore,
-    },
+    cancel,
   };
 }
 
diff --git a/packages/taler-wallet-webextension/src/cta/Tip/stories.tsx b/packages/taler-wallet-webextension/src/cta/Tip/stories.tsx
index 8c72a8812..efb9424d1 100644
--- a/packages/taler-wallet-webextension/src/cta/Tip/stories.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Tip/stories.tsx
@@ -42,5 +42,4 @@ export const Ready = createExample(ReadyView, {
   merchantBaseUrl: "http://merchant.url/",
   exchangeBaseUrl: "http://exchange.url/",
   accept: {},
-  ignore: {},
 });
diff --git a/packages/taler-wallet-webextension/src/cta/Tip/test.ts b/packages/taler-wallet-webextension/src/cta/Tip/test.ts
index 1c7d363f4..363652e47 100644
--- a/packages/taler-wallet-webextension/src/cta/Tip/test.ts
+++ b/packages/taler-wallet-webextension/src/cta/Tip/test.ts
@@ -30,7 +30,7 @@ describe("Tip CTA states", () => {
   it("should tell the user that the URI is missing", async () => {
     const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
       mountHook(() =>
-        useComponentState({ talerTipUri: undefined }, {
+        useComponentState({ talerTipUri: undefined, cancel: async () => { null } }, {
           prepareTip: async () => ({}),
           acceptTip: async () => ({}),
         } as any),
@@ -62,7 +62,7 @@ describe("Tip CTA states", () => {
 
     const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
       mountHook(() =>
-        useComponentState({ talerTipUri: "taler://tip/asd" }, {
+        useComponentState({ talerTipUri: "taler://tip/asd", cancel: async () => { null } }, {
           prepareTip: async () =>
           ({
             accepted: tipAccepted,
@@ -114,7 +114,7 @@ describe("Tip CTA states", () => {
   it("should be ignored after clicking the ignore button", async () => {
     const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
       mountHook(() =>
-        useComponentState({ talerTipUri: "taler://tip/asd" }, {
+        useComponentState({ talerTipUri: "taler://tip/asd", cancel: async () => { null } }, {
           prepareTip: async () =>
           ({
             exchangeBaseUrl: "exchange url",
@@ -142,25 +142,25 @@ describe("Tip CTA states", () => {
       expect(state.amount).deep.eq(Amounts.parseOrThrow("EUR:1"));
       expect(state.merchantBaseUrl).eq("merchant url");
       expect(state.exchangeBaseUrl).eq("exchange url");
-      if (state.ignore.onClick === undefined) expect.fail();
+      // if (state.ignore.onClick === undefined) expect.fail();
 
-      state.ignore.onClick();
+      // state.ignore.onClick();
     }
 
-    await waitNextUpdate();
-    {
-      const state = getLastResultOrThrow();
+    // await waitNextUpdate();
+    // {
+    //   const state = getLastResultOrThrow();
 
-      if (state.status !== "ignored") expect.fail();
-      if (state.error) expect.fail();
-    }
+    //   if (state.status !== "ignored") expect.fail();
+    //   if (state.error) expect.fail();
+    // }
     await assertNoPendingUpdate();
   });
 
   it("should render accepted if the tip has been used previously", async () => {
     const { getLastResultOrThrow, waitNextUpdate, assertNoPendingUpdate } =
       mountHook(() =>
-        useComponentState({ talerTipUri: "taler://tip/asd" }, {
+        useComponentState({ talerTipUri: "taler://tip/asd", cancel: async () => { null } }, {
           prepareTip: async () =>
           ({
             accepted: true,
diff --git a/packages/taler-wallet-webextension/src/cta/Tip/views.tsx b/packages/taler-wallet-webextension/src/cta/Tip/views.tsx
index 442d41d28..2df55f8fd 100644
--- a/packages/taler-wallet-webextension/src/cta/Tip/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Tip/views.tsx
@@ -19,7 +19,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 { State } from "./index.js";
@@ -69,7 +69,6 @@ export function ReadyView(state: State.Ready): VNode {
           title={<i18n.Translate>Amount</i18n.Translate>}
           text={<Amount value={state.amount} />}
           kind="positive"
-          big
         />
         <Part
           title={<i18n.Translate>Merchant URL</i18n.Translate>}
@@ -88,12 +87,16 @@ export function ReadyView(state: State.Ready): VNode {
           color="success"
           onClick={state.accept.onClick}
         >
-          <i18n.Translate>Accept tip</i18n.Translate>
-        </Button>
-        <Button onClick={state.ignore.onClick}>
-          <i18n.Translate>Ignore</i18n.Translate>
+          <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>
   );
 }