transaction details template

mayor change in the template of the transaction details for every
transaction
more work needs to be done in wallet core for tip and refund to show
more information about the merchant like logo and website

5 files changed, 146 insertions, 40 deletions

diff --git a/packages/taler-wallet-webextension/src/components/Amount.tsx b/packages/taler-wallet-webextension/src/components/Amount.tsx
index c41f7faf6..b415a30cd 100644
--- a/packages/taler-wallet-webextension/src/components/Amount.tsx
+++ b/packages/taler-wallet-webextension/src/components/Amount.tsx
@@ -6,7 +6,7 @@ export function Amount({ value }: { value: AmountJson | AmountString }): VNode {
   const amount = Amounts.stringifyValue(aj, 2);
   return (
     <Fragment>
-      {amount} {aj.currency}
+      {amount}&nbsp;{aj.currency}
     </Fragment>
   );
 }
diff --git a/packages/taler-wallet-webextension/src/components/BalanceTable.tsx b/packages/taler-wallet-webextension/src/components/BalanceTable.tsx
index e67fb6b4d..a2c91f4a1 100644
--- a/packages/taler-wallet-webextension/src/components/BalanceTable.tsx
+++ b/packages/taler-wallet-webextension/src/components/BalanceTable.tsx
@@ -44,7 +44,7 @@ export function BalanceTable({
                 width: "100%",
               }}
             >
-              {Amounts.stringifyValue(av)}
+              {Amounts.stringifyValue(av, 2)}
             </td>
           </tr>
         );
diff --git a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
index 185021bc0..3a2a12c72 100644
--- a/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
+++ b/packages/taler-wallet-webextension/src/components/BankDetailsByPaytoType.tsx
@@ -46,43 +46,47 @@ export function BankDetailsByPaytoType({
   if (payto.isKnown && payto.targetType === "bitcoin") {
     const min = segwitMinAmount(amount.currency);
     return (
-      <section style={{ textAlign: "left" }}>
+      <section
+        style={{
+          textAlign: "left",
+          border: "solid 1px black",
+          padding: 8,
+          borderRadius: 4,
+        }}
+      >
+        <p style={{ marginTop: 0 }}>Bitcoin transfer details</p>
         <p>
           <i18n.Translate>
-            Bitcoin exchange need a transaction with 3 output, one output is the
+            The exchange need a transaction with 3 output, one output is the
             exchange account and the other two are segwit fake address for
-            metadata with an minimum amount. Reserve pub : {subject}
+            metadata with an minimum amount.
           </i18n.Translate>
         </p>
+        <Row
+          literal
+          name={<i18n.Translate>Reserve</i18n.Translate>}
+          value={subject}
+        />
+
         <p>
           <i18n.Translate>
             In bitcoincore wallet use &apos;Add Recipient&apos; button to add
             two additional recipient and copy addresses and amounts
           </i18n.Translate>
-          <ul>
-            <li>
-              {payto.targetPath} {Amounts.stringifyValue(amount)} BTC
-            </li>
-            {payto.segwitAddrs.map((addr, i) => (
-              <li key={i}>
-                {addr} {Amounts.stringifyValue(min)} BTC
-              </li>
-            ))}
-          </ul>
-          <i18n.Translate>
-            In Electrum wallet paste the following three lines in &apos;Pay
-            to&apos; field :
-          </i18n.Translate>
-          <ul>
-            <li>
-              {payto.targetPath},{Amounts.stringifyValue(amount)}
-            </li>
-            {payto.segwitAddrs.map((addr, i) => (
-              <li key={i}>
-                {addr} {Amounts.stringifyValue(min)} BTC
-              </li>
-            ))}
-          </ul>
+        </p>
+        <table>
+          <tr>
+            <td>{payto.targetPath}</td>
+            <td>{Amounts.stringifyValue(amount)} BTC</td>
+          </tr>
+          {payto.segwitAddrs.map((addr, i) => (
+            <tr key={i}>
+              <td>{addr}</td>
+              <td>{Amounts.stringifyValue(min)} BTC</td>
+            </tr>
+          ))}
+        </table>
+        <p>
           <i18n.Translate>
             Make sure the amount show{" "}
             {Amounts.stringifyValue(Amounts.sum([amount, min, min]).amount)}{" "}
@@ -93,7 +97,7 @@ export function BankDetailsByPaytoType({
     );
   }
 
-  const firstPart = !payto.isKnown ? (
+  const accountPart = !payto.isKnown ? (
     <Row
       name={<i18n.Translate>Account</i18n.Translate>}
       value={payto.targetPath}
@@ -113,10 +117,17 @@ export function BankDetailsByPaytoType({
     <Row name={<i18n.Translate>IBAN</i18n.Translate>} value={payto.iban} />
   ) : undefined;
   return (
-    <div style={{ textAlign: "left" }}>
-      <p>Bank transfer details</p>
+    <div
+      style={{
+        textAlign: "left",
+        border: "solid 1px black",
+        padding: 8,
+        borderRadius: 4,
+      }}
+    >
+      <p style={{ marginTop: 0 }}>Bank transfer details</p>
       <table>
-        {firstPart}
+        {accountPart}
         <Row
           name={<i18n.Translate>Exchange</i18n.Translate>}
           value={exchangeBaseUrl}
@@ -176,7 +187,7 @@ function Row({
           </TooltipRight>
         )}
       </td>
-      <td>
+      <td style={{ paddingRight: 8 }}>
         <b>{name}</b>
       </td>
       {literal ? (
diff --git a/packages/taler-wallet-webextension/src/components/Part.tsx b/packages/taler-wallet-webextension/src/components/Part.tsx
index 21c0f65dc..58165a349 100644
--- a/packages/taler-wallet-webextension/src/components/Part.tsx
+++ b/packages/taler-wallet-webextension/src/components/Part.tsx
@@ -14,33 +14,122 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 import { PaytoUri, stringifyPaytoUri } from "@gnu-taler/taler-util";
+import { styled } from "@linaria/react";
 import { Fragment, h, VNode } from "preact";
-import { ExtraLargeText, LargeText, SmallLightText } from "./styled/index.js";
+import { useState } from "preact/hooks";
+import {
+  ExtraLargeText,
+  LargeText,
+  SmallBoldText,
+  SmallLightText,
+} from "./styled/index.js";
 
 export type Kind = "positive" | "negative" | "neutral";
 interface Props {
-  title: VNode;
+  title: VNode | string;
   text: VNode | string;
-  kind: Kind;
+  kind?: Kind;
   big?: boolean;
+  showSign?: boolean;
 }
-export function Part({ text, title, kind, big }: Props): VNode {
+export function Part({
+  text,
+  title,
+  kind = "neutral",
+  big,
+  showSign,
+}: Props): VNode {
   const Text = big ? ExtraLargeText : LargeText;
   return (
     <div style={{ margin: "1em" }}>
-      <SmallLightText style={{ margin: ".5em" }}>{title}</SmallLightText>
+      <SmallBoldText style={{ marginBottom: "1em" }}>{title}</SmallBoldText>
       <Text
         style={{
           color:
             kind == "positive" ? "green" : kind == "negative" ? "red" : "black",
+          fontWeight: "lighten",
         }}
       >
+        {!showSign || kind === "neutral"
+          ? undefined
+          : kind === "positive"
+          ? "+"
+          : "-"}
         {text}
       </Text>
     </div>
   );
 }
 
+const CollasibleBox = styled.div`
+  border: 1px solid black;
+  border-radius: 0.25em;
+  display: flex;
+  vertical-align: middle;
+  justify-content: space-between;
+  flex-direction: column;
+  /* margin: 0.5em; */
+  padding: 0.5em;
+  /* margin: 1em; */
+  /* width: 100%; */
+  /* color: #721c24; */
+  /* background: #f8d7da; */
+
+  & > div {
+    display: flex;
+    justify-content: space-between;
+    div {
+      margin-top: auto;
+      margin-bottom: auto;
+    }
+    & > button {
+      align-self: center;
+      font-size: 100%;
+      padding: 0;
+      height: 28px;
+      width: 28px;
+    }
+  }
+`;
+import arrowDown from "../svg/chevron-down.svg";
+
+export function PartCollapsible({ text, title, big, showSign }: Props): VNode {
+  const Text = big ? ExtraLargeText : LargeText;
+  const [collapsed, setCollapsed] = useState(true);
+
+  return (
+    <CollasibleBox>
+      <div>
+        <SmallBoldText>{title}</SmallBoldText>
+        <button
+          onClick={() => {
+            setCollapsed((v) => !v);
+          }}
+        >
+          <div
+            style={{
+              transform: !collapsed ? "scaleY(-1)" : undefined,
+              height: 24,
+            }}
+            dangerouslySetInnerHTML={{ __html: arrowDown }}
+          />
+        </button>
+      </div>
+      {/* <SmallBoldText
+        style={{
+          paddingBottom: "1em",
+          paddingTop: "1em",
+          paddingLeft: "1em",
+          border: "black solid 1px",
+        }}
+      >
+        
+      </SmallBoldText> */}
+      {!collapsed && <div style={{ display: "block" }}>{text}</div>}
+    </CollasibleBox>
+  );
+}
+
 interface PropsPayto {
   payto: PaytoUri;
   kind: Kind;
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 7517a1388..a531a15dc 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -87,7 +87,7 @@ export const WalletBox = styled.div<{ noPadding?: boolean }>`
   justify-content: space-between;
   align-items: center;
   & > * {
-    width: 500px;
+    width: 600px;
   }
   & > section {
     padding: ${({ noPadding }) => (noPadding ? "0px" : "8px")};
@@ -660,6 +660,12 @@ export const WarningText = styled.div`
 export const SmallText = styled.div`
   font-size: small;
 `;
+
+export const SmallBoldText = styled.div`
+  font-size: small;
+  font-weight: bold;
+`;
+
 export const LargeText = styled.div`
   font-size: large;
 `;