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

1 files changed, 94 insertions, 5 deletions

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;