pending operations

4 files changed, 152 insertions, 48 deletions

diff --git a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
index 136302166..665b0de6f 100644
--- a/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
+++ b/packages/taler-wallet-webextension/src/components/Banner.stories.tsx
@@ -20,7 +20,10 @@
  */
 
 import { Banner } from "./Banner";
-import { Fragment, h } from "preact";
+import { Fragment, h, VNode } from "preact";
+import { Avatar } from "../mui/Avatar";
+import { Icon } from "./styled";
+import { Typography } from "../mui/Typography";
 
 export default {
   title: "mui/banner",
@@ -44,11 +47,72 @@ function Wrapper({ children }: any) {
     </div>
   );
 }
+function SignalWifiOffIcon({ ...rest }: any): VNode {
+  return <Icon {...rest} />;
+}
 
 export const BasicExample = () => (
   <Fragment>
     <Wrapper>
-      <Banner />
+      <p>
+        Example taken from:
+        <a
+          target="_blank"
+          rel="noreferrer"
+          href="https://medium.com/material-ui/introducing-material-ui-design-system-93e921beb8df"
+        >
+          https://medium.com/material-ui/introducing-material-ui-design-system-93e921beb8df
+        </a>
+      </p>
+      <Banner
+        elements={[
+          {
+            icon: <SignalWifiOffIcon />,
+            description: (
+              <Typography>
+                You have lost connection to the internet. This app is offline.
+              </Typography>
+            ),
+          },
+        ]}
+        confirm={{
+          label: "turn on wifi",
+          action: () => {
+            return null;
+          },
+        }}
+      />
+    </Wrapper>
+  </Fragment>
+);
+
+export const PendingOperation = () => (
+  <Fragment>
+    <Wrapper>
+      <Banner
+        title="PENDING TRANSACTIONS"
+        style={{ backgroundColor: "lightblue", padding: 8 }}
+        elements={[
+          {
+            icon: (
+              <Avatar
+                style={{
+                  border: "solid blue 1px",
+                  color: "blue",
+                  boxSizing: "border-box",
+                }}
+              >
+                P
+              </Avatar>
+            ),
+            description: (
+              <Typography>
+                <b>EUR 37.95</b> - 5 feb 2022
+              </Typography>
+            ),
+          },
+        ]}
+      />
     </Wrapper>
   </Fragment>
 );
diff --git a/packages/taler-wallet-webextension/src/components/Banner.tsx b/packages/taler-wallet-webextension/src/components/Banner.tsx
index f6af81184..09dfac816 100644
--- a/packages/taler-wallet-webextension/src/components/Banner.tsx
+++ b/packages/taler-wallet-webextension/src/components/Banner.tsx
@@ -1,64 +1,57 @@
-import { h, Fragment, VNode } from "preact";
+import { h, Fragment, VNode, JSX } from "preact";
 import { Divider } from "../mui/Divider";
 import { Button } from "../mui/Button";
 import { Typography } from "../mui/Typography";
 import { Avatar } from "../mui/Avatar";
 import { Grid } from "../mui/Grid";
 import { Paper } from "../mui/Paper";
-import { Icon } from "./styled";
-import settingsIcon from "../../static/img/settings_black_24dp.svg";
-// & > a > div.settings-icon {
-//   mask: url(${settingsIcon}) no-repeat center;
-//   background-color: white;
-//   width: 24px;
-//   height: 24px;
-//   margin-left: auto;
-//   margin-right: 8px;
-//   padding: 4px;
-// }
-// & > a.active {
-//   background-color: #f8faf7;
-//   color: #0042b2;
-//   font-weight: bold;
-// }
-// & > a.active > div.settings-icon {
-//   background-color: #0042b2;
-// }
 
-function SignalWifiOffIcon({ ...rest }: any): VNode {
-  return <Icon {...rest} />;
+interface Props extends JSX.HTMLAttributes<HTMLDivElement> {
+  title?: string;
+  elements: {
+    icon?: VNode;
+    description: VNode;
+  }[];
+  confirm?: {
+    label: string;
+    action: () => void;
+  };
 }
 
-export function Banner({}: {}) {
+export function Banner({ title, elements, confirm, ...rest }: Props) {
   return (
     <Fragment>
-      <Paper elevation={3} /*className={classes.paper}*/>
-        <Grid
-          container
-          // wrap="nowrap"
-          // spacing={10}
-          alignItems="center"
-          columns={3}
-        >
-          <Grid item xs={1}>
-            <Avatar>
-              <SignalWifiOffIcon style={{ backgroundColor: "red" }} />
-            </Avatar>
-          </Grid>
-          <Grid item xs={1}>
-            <Typography>
-              You have lost connection to the internet. This app is offline.
-            </Typography>
+      <Paper elevation={0} {...rest}>
+        {title && (
+          <Grid container>
+            <Grid item>
+              <Typography>{title}</Typography>
+            </Grid>
           </Grid>
+        )}
+        <Grid container wrap="nowrap" spacing={1} alignItems="center">
+          {elements.map((e, i) => (
+            <Fragment key={i}>
+              {e.icon && (
+                <Grid item>
+                  <Avatar>{e.icon}</Avatar>
+                </Grid>
+              )}
+              <Grid item>{e.description}</Grid>
+            </Fragment>
+          ))}
         </Grid>
-        <Grid container justifyContent="flex-end" spacing={8} columns={3}>
-          <Grid item xs={1}>
-            <Button color="primary">Turn on wifi</Button>
+        {confirm && (
+          <Grid container justifyContent="flex-end" spacing={8}>
+            <Grid item>
+              <Button color="primary" onClick={confirm.action}>
+                {confirm.label}
+              </Button>
+            </Grid>
           </Grid>
-        </Grid>
+        )}
       </Paper>
       <Divider />
-      {/* <CssBaseline /> */}
     </Fragment>
   );
 }
diff --git a/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
new file mode 100644
index 000000000..99f43a62b
--- /dev/null
+++ b/packages/taler-wallet-webextension/src/components/PendingTransactions.tsx
@@ -0,0 +1,46 @@
+import { Amounts, Transaction } from "@gnu-taler/taler-util";
+import { PendingTaskInfo } from "@gnu-taler/taler-wallet-core";
+import { Fragment, h, VNode } from "preact";
+import { Avatar } from "../mui/Avatar";
+import { Typography } from "../mui/Typography";
+import Banner from "./Banner";
+import { Time } from "./Time";
+
+interface Props {
+  transactions: Transaction[];
+}
+
+export function PendingTransactions({ transactions }: Props) {
+  return (
+    <Banner
+      title="PENDING OPERATIONS"
+      style={{ backgroundColor: "lightblue", padding: 8 }}
+      elements={transactions.map((t) => {
+        const amount = Amounts.parseOrThrow(t.amountEffective);
+        return {
+          icon: (
+            <Avatar
+              style={{
+                border: "solid blue 1px",
+                color: "blue",
+                boxSizing: "border-box",
+              }}
+            >
+              {t.type.substring(0, 1)}
+            </Avatar>
+          ),
+          description: (
+            <Typography>
+              <b>
+                {amount.currency} {Amounts.stringifyValue(amount)}
+              </b>{" "}
+              - <Time timestamp={t.timestamp} format="dd MMMM yyyy" />
+            </Typography>
+          ),
+        };
+      })}
+    />
+  );
+}
+
+export default PendingTransactions;
diff --git a/packages/taler-wallet-webextension/src/components/styled/index.tsx b/packages/taler-wallet-webextension/src/components/styled/index.tsx
index 80bfaa549..92f149ea3 100644
--- a/packages/taler-wallet-webextension/src/components/styled/index.tsx
+++ b/packages/taler-wallet-webextension/src/components/styled/index.tsx
@@ -778,6 +778,7 @@ export const WarningBox = styled(ErrorBox)`
 `;
 
 import settingsIcon from "../../../static/img/settings_black_24dp.svg";
+import wifiIcon from "../../../static/img/wifi.svg";
 
 export const NavigationHeaderHolder = styled.div`
   width: 100%;
@@ -827,7 +828,7 @@ export const NavigationHeader = styled.div`
 `;
 
 export const Icon = styled.div`
-  mask: url(${settingsIcon}) no-repeat center;
+  mask: url(${wifiIcon}) no-repeat center;
   background-color: gray;
   width: 24px;
   height: 24px;