From 0b4976601fe2ecb0462fe72ae188b5cbba06d9cc Mon Sep 17 00:00:00 2001
From: Sebastian <sebasjm@gmail.com>
Date: Wed, 16 Jun 2021 18:21:03 -0300
Subject: components renaming to follow react pattern

---
 .../src/wallet/Withdraw.tsx                        | 161 +++++++++++++++++++++
 1 file changed, 161 insertions(+)
 create mode 100644 packages/taler-wallet-webextension/src/wallet/Withdraw.tsx

(limited to 'packages/taler-wallet-webextension/src/wallet/Withdraw.tsx')

diff --git a/packages/taler-wallet-webextension/src/wallet/Withdraw.tsx b/packages/taler-wallet-webextension/src/wallet/Withdraw.tsx
new file mode 100644
index 000000000..5dc12407b
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/wallet/Withdraw.tsx
@@ -0,0 +1,161 @@
+/*
+ This file is part of TALER
+ (C) 2015-2016 GNUnet e.V.
+
+ TALER is free software; you can redistribute it and/or modify it under the
+ terms of the GNU General Public License as published by the Free Software
+ Foundation; either version 3, or (at your option) any later version.
+
+ TALER is distributed in the hope that it will be useful, but WITHOUT ANY
+ WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
+ A PARTICULAR PURPOSE.  See the GNU General Public License for more details.
+
+ You should have received a copy of the GNU General Public License along with
+ TALER; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
+ */
+
+/**
+ * Page shown to the user to confirm creation
+ * of a reserve, usually requested by the bank.
+ *
+ * @author Florian Dold
+ */
+
+import { i18n } from '@gnu-taler/taler-util'
+import { renderAmount } from "../renderHtml";
+
+import { useState, useEffect } from "preact/hooks";
+import {
+  acceptWithdrawal,
+  onUpdateNotification,
+  getWithdrawalDetailsForUri,
+} from "../wxApi";
+import { WithdrawUriInfoResponse } from "@gnu-taler/taler-util";
+import { JSX } from "preact/jsx-runtime";
+
+interface Props {
+  talerWithdrawUri?: string;
+}
+
+export interface ViewProps {
+  talerWithdrawUri?: string;
+  details?: WithdrawUriInfoResponse;
+  cancelled?: boolean;
+  selectedExchange?: string;
+  accept: () => Promise<void>;
+  setCancelled: (b: boolean) => void;
+  setSelecting: (b: boolean) => void;
+};
+
+export function View({ talerWithdrawUri, details, cancelled, selectedExchange, accept, setCancelled, setSelecting }: ViewProps) {
+  const [state, setState] = useState(1)
+  setTimeout(() => {
+    setState(s => s + 1)
+  }, 1000);
+  if (!talerWithdrawUri) {
+    return <span><i18n.Translate>missing withdraw uri</i18n.Translate></span>;
+  }
+
+  if (!details) {
+    return <span><i18n.Translate>Loading...</i18n.Translate></span>;
+  }
+
+  if (cancelled) {
+    return <span><i18n.Translate>Withdraw operation has been cancelled.{state}</i18n.Translate></span>;
+  }
+
+  return (
+    <div>
+      <h1><i18n.Translate>Digital Cash Withdrawal</i18n.Translate></h1>
+      <p><i18n.Translate>
+        You are about to withdraw{" "}
+        <strong>{renderAmount(details.amount)}</strong> from your bank account
+        into your wallet.
+      </i18n.Translate></p>
+      {selectedExchange ? (
+        <p><i18n.Translate>
+          The exchange <strong>{selectedExchange}</strong> will be used as the
+          Taler payment service provider.
+        </i18n.Translate></p>
+      ) : null}
+
+      <div>
+        <button
+          className="pure-button button-success"
+          disabled={!selectedExchange}
+          onClick={() => accept()}
+        >
+          {i18n.str`Accept fees and withdraw`}
+        </button>
+        <p>
+          <span
+            role="button"
+            tabIndex={0}
+            style={{ textDecoration: "underline", cursor: "pointer" }}
+            onClick={() => setSelecting(true)}
+          >
+            {i18n.str`Chose different exchange provider`}
+          </span>
+          <br />
+          <span
+            role="button"
+            tabIndex={0}
+            style={{ textDecoration: "underline", cursor: "pointer" }}
+            onClick={() => setCancelled(true)}
+          >
+            {i18n.str`Cancel withdraw operation`}
+          </span>
+        </p>
+      </div>
+    </div>
+  )
+}
+
+export function WithdrawPage({ talerWithdrawUri }: Props): JSX.Element {
+  const [details, setDetails] = useState<WithdrawUriInfoResponse | undefined>(undefined);
+  const [selectedExchange, setSelectedExchange] = useState<
+    string | undefined
+  >(undefined);
+  const [cancelled, setCancelled] = useState(false);
+  const [selecting, setSelecting] = useState(false);
+  const [errMsg, setErrMsg] = useState<string | undefined>("");
+  const [updateCounter, setUpdateCounter] = useState(1);
+
+  useEffect(() => {
+    return onUpdateNotification(() => {
+      setUpdateCounter(updateCounter + 1);
+    });
+  }, []);
+
+  useEffect(() => {
+    if (!talerWithdrawUri) return
+    const fetchData = async (): Promise<void> => {
+      const res = await getWithdrawalDetailsForUri({ talerWithdrawUri });
+      setDetails(res);
+      if (res.defaultExchangeBaseUrl) {
+        setSelectedExchange(res.defaultExchangeBaseUrl);
+      }
+    };
+    fetchData();
+  }, [selectedExchange, errMsg, selecting, talerWithdrawUri, updateCounter]);
+
+  const accept = async (): Promise<void> => {
+    if (!talerWithdrawUri) return
+    if (!selectedExchange) {
+      throw Error("can't accept, no exchange selected");
+    }
+    console.log("accepting exchange", selectedExchange);
+    const res = await acceptWithdrawal(talerWithdrawUri, selectedExchange);
+    console.log("accept withdrawal response", res);
+    if (res.confirmTransferUrl) {
+      document.location.href = res.confirmTransferUrl;
+    }
+  };
+
+  return <View accept={accept}
+    setCancelled={setCancelled} setSelecting={setSelecting}
+    cancelled={cancelled} details={details} selectedExchange={selectedExchange}
+    talerWithdrawUri={talerWithdrawUri}
+  />
+}
+
-- 
cgit v1.2.3