find taler action in clipboard and withdraw with mobile

3 files changed, 69 insertions, 27 deletions

diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts
index 7425dbd29..7bd667268 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/index.ts
@@ -85,6 +85,7 @@ export namespace State {
 
     ageRestriction?: SelectFieldHandler;
 
+    talerWithdrawUri?: string;
     cancel: () => Promise<void>;
   };
 }
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts b/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
index 015c9aaca..0d2e150e7 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/state.ts
@@ -410,6 +410,7 @@ export function useComponentStateFromURI(
     toBeReceived,
     withdrawalFee,
     chosenAmount,
+    talerWithdrawUri,
     ageRestriction,
     doWithdrawal: {
       onClick:
diff --git a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
index 850bd6e8f..440586343 100644
--- a/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
+++ b/packages/taler-wallet-webextension/src/cta/Withdraw/views.tsx
@@ -23,6 +23,7 @@ import { SelectList } from "../../components/SelectList.js";
 import {
   Input,
   Link,
+  LinkSuccess,
   SubTitle,
   SuccessBox,
   SvgIcon,
@@ -35,6 +36,8 @@ import { TermsOfServiceSection } from "../TermsOfServiceSection.js";
 import { State } from "./index.js";
 import editIcon from "../../svg/edit_24px.svg";
 import { Amount } from "../../components/Amount.js";
+import { QR } from "../../components/QR.js";
+import { useState } from "preact/hooks";
 
 export function LoadingUriView({ error }: State.LoadingUriError): VNode {
   const { i18n } = useTranslationContext();
@@ -126,13 +129,13 @@ export function SuccessView(state: State.Success): VNode {
               }}
             >
               <i18n.Translate>Exchange</i18n.Translate>
-              <Link>
+              {/* <Link>
                 <SvgIcon
                   title="Edit"
                   dangerouslySetInnerHTML={{ __html: editIcon }}
                   color="black"
                 />
-              </Link>
+              </Link> */}
             </div>
           }
           text={<ExchangeDetails exchange={state.exchangeUrl} />}
@@ -164,31 +167,36 @@ export function SuccessView(state: State.Success): VNode {
       </section>
       {state.tosProps && <TermsOfServiceSection {...state.tosProps} />}
       {state.tosProps ? (
-        <section>
-          {(state.tosProps.terms.status === "accepted" ||
-            (state.mustAcceptFirst && state.tosProps.reviewed)) && (
-            <Button
-              variant="contained"
-              color="success"
-              disabled={!state.doWithdrawal.onClick}
-              onClick={state.doWithdrawal.onClick}
-            >
-              <i18n.Translate>
-                Withdraw &nbsp; <Amount value={state.toBeReceived} />
-              </i18n.Translate>
-            </Button>
-          )}
-          {state.tosProps.terms.status === "notfound" && (
-            <Button
-              variant="contained"
-              color="warning"
-              disabled={!state.doWithdrawal.onClick}
-              onClick={state.doWithdrawal.onClick}
-            >
-              <i18n.Translate>Withdraw anyway</i18n.Translate>
-            </Button>
-          )}
-        </section>
+        <Fragment>
+          <section>
+            {(state.tosProps.terms.status === "accepted" ||
+              (state.mustAcceptFirst && state.tosProps.reviewed)) && (
+              <Button
+                variant="contained"
+                color="success"
+                disabled={!state.doWithdrawal.onClick}
+                onClick={state.doWithdrawal.onClick}
+              >
+                <i18n.Translate>
+                  Withdraw &nbsp; <Amount value={state.toBeReceived} />
+                </i18n.Translate>
+              </Button>
+            )}
+            {state.tosProps.terms.status === "notfound" && (
+              <Button
+                variant="contained"
+                color="warning"
+                disabled={!state.doWithdrawal.onClick}
+                onClick={state.doWithdrawal.onClick}
+              >
+                <i18n.Translate>Withdraw anyway</i18n.Translate>
+              </Button>
+            )}
+          </section>
+          {state.talerWithdrawUri ? (
+            <WithdrawWithMobile talerWithdrawUri={state.talerWithdrawUri} />
+          ) : undefined}
+        </Fragment>
       ) : (
         <section>
           <i18n.Translate>Loading terms of service...</i18n.Translate>
@@ -202,3 +210,35 @@ export function SuccessView(state: State.Success): VNode {
     </WalletAction>
   );
 }
+
+function WithdrawWithMobile({
+  talerWithdrawUri,
+}: {
+  talerWithdrawUri: string;
+}): VNode {
+  const { i18n } = useTranslationContext();
+  const [showQR, setShowQR] = useState<boolean>(false);
+
+  return (
+    <section>
+      <LinkSuccess upperCased onClick={() => setShowQR((qr) => !qr)}>
+        {!showQR ? (
+          <i18n.Translate>Withdraw to a mobile phone</i18n.Translate>
+        ) : (
+          <i18n.Translate>Hide QR</i18n.Translate>
+        )}
+      </LinkSuccess>
+      {showQR && (
+        <div>
+          <QR text={talerWithdrawUri} />
+          <i18n.Translate>
+            Scan the QR code or &nbsp;
+            <a href={talerWithdrawUri}>
+              <i18n.Translate>click here</i18n.Translate>
+            </a>
+          </i18n.Translate>
+        </div>
+      )}
+    </section>
+  );
+}