reserveCreated new design

1 files changed, 136 insertions, 47 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
index 9008e9751..a72026ab8 100644
--- a/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ReserveCreated.tsx
@@ -1,66 +1,155 @@
-import { h, Fragment, VNode } from "preact";
-import { useState } from "preact/hooks";
+import {
+  AmountJson,
+  Amounts,
+  parsePaytoUri,
+  PaytoUri,
+} from "@gnu-taler/taler-util";
+import { Fragment, h, VNode } from "preact";
+import { useEffect, useState } from "preact/hooks";
 import { QR } from "../components/QR";
-import { ButtonBox, FontIcon, WalletBox } from "../components/styled";
+import {
+  ButtonDestructive,
+  ButtonPrimary,
+  WalletBox,
+  WarningBox,
+} from "../components/styled";
 export interface Props {
   reservePub: string;
-  paytos: string[];
+  payto: string;
+  exchangeBaseUrl: string;
+  amount: AmountJson;
   onBack: () => void;
 }
 
-export function ReserveCreated({ reservePub, paytos, onBack }: Props): VNode {
-  const [opened, setOpened] = useState(-1);
+interface BankDetailsProps {
+  payto: PaytoUri;
+  exchangeBaseUrl: string;
+  subject: string;
+  amount: string;
+}
+
+function Row({
+  name,
+  value,
+  literal,
+}: {
+  name: string;
+  value: string;
+  literal?: boolean;
+}): VNode {
+  const [copied, setCopied] = useState(false);
+  function copyText(): void {
+    navigator.clipboard.writeText(value);
+    setCopied(true);
+  }
+  useEffect(() => {
+    setTimeout(() => {
+      setCopied(false);
+    }, 1000);
+  }, [copied]);
+  return (
+    <tr>
+      <td>
+        {!copied ? (
+          <ButtonPrimary small onClick={copyText}>
+            &nbsp; Copy &nbsp;
+          </ButtonPrimary>
+        ) : (
+          <ButtonPrimary small disabled>
+            Copied
+          </ButtonPrimary>
+        )}
+      </td>
+      <td>
+        <b>{name}</b>
+      </td>
+      {literal ? (
+        <td>
+          <pre style={{ whiteSpace: "pre-wrap", wordBreak: "break-word" }}>
+            {value}
+          </pre>
+        </td>
+      ) : (
+        <td>{value}</td>
+      )}
+    </tr>
+  );
+}
+
+function BankDetailsByPaytoType({
+  payto,
+  subject,
+  exchangeBaseUrl,
+  amount,
+}: BankDetailsProps): VNode {
+  const firstPart = !payto.isKnown ? (
+    <Fragment>
+      <Row name="Account" value={payto.targetPath} />
+      <Row name="Exchange" value={exchangeBaseUrl} />
+    </Fragment>
+  ) : payto.targetType === "x-taler-bank" ? (
+    <Fragment>
+      <Row name="Bank host" value={payto.host} />
+      <Row name="Bank account" value={payto.account} />
+      <Row name="Exchange" value={exchangeBaseUrl} />
+    </Fragment>
+  ) : payto.targetType === "iban" ? (
+    <Fragment>
+      <Row name="IBAN" value={payto.iban} />
+      <Row name="Exchange" value={exchangeBaseUrl} />
+    </Fragment>
+  ) : undefined;
+  return (
+    <table>
+      {firstPart}
+      <Row name="Amount" value={amount} />
+      <Row name="Subject" value={subject} literal />
+    </table>
+  );
+}
+export function ReserveCreated({
+  reservePub,
+  payto,
+  onBack,
+  exchangeBaseUrl,
+  amount,
+}: Props): VNode {
+  const paytoURI = parsePaytoUri(payto);
+  // const url = new URL(paytoURI?.targetPath);
+  if (!paytoURI) {
+    return <div>could not parse payto uri from exchange {payto}</div>;
+  }
   return (
     <WalletBox>
       <section>
-        <h2>Reserve created!</h2>
-        <p>
-          Now you need to send money to the exchange to one of the following
-          accounts
-        </p>
+        <h1>Bank transfer details</h1>
         <p>
-          To complete the setup of the reserve, you must now initiate a wire
-          transfer using the given wire transfer subject and crediting the
-          specified amount to the indicated account of the exchange.
+          Please wire <b>{Amounts.stringify(amount)}</b> to:
         </p>
+        <BankDetailsByPaytoType
+          amount={Amounts.stringify(amount)}
+          exchangeBaseUrl={exchangeBaseUrl}
+          payto={paytoURI}
+          subject={reservePub}
+        />
       </section>
       <section>
-        <ul>
-          {paytos.map((href, idx) => {
-            const url = new URL(href);
-            return (
-              <li key={idx}>
-                <p>
-                  <a
-                    href=""
-                    onClick={(e) => {
-                      setOpened((o) => (o === idx ? -1 : idx));
-                      e.preventDefault();
-                    }}
-                  >
-                    {url.pathname}
-                  </a>
-                  {opened === idx && (
-                    <Fragment>
-                      <p>
-                        If your system supports RFC 8905, you can do this by
-                        opening <a href={href}>this URI</a> or scan the QR with
-                        your wallet
-                      </p>
-                      <QR text={href} />
-                    </Fragment>
-                  )}
-                </p>
-              </li>
-            );
-          })}
-        </ul>
+        <p>
+          <WarningBox>
+            Make sure to use the correct subject, otherwise the money will not
+            arrive in this wallet.
+          </WarningBox>
+        </p>
+        <p>
+          Alternative, you can also scan this QR code or open{" "}
+          <a href={payto}>this link</a> if you have a banking app installed that
+          supports RFC 8905
+        </p>
+        <QR text={payto} />
       </section>
       <footer>
-        <ButtonBox onClick={onBack}>
-          <FontIcon>&#x2190;</FontIcon>
-        </ButtonBox>
         <div />
+        <ButtonDestructive onClick={onBack}>Cancel withdraw</ButtonDestructive>
       </footer>
     </WalletBox>
   );