feat: change customer screen transaction list part to the new design

feat: created the compliance details component (no data for now)

fix: added missing properties into the gql schema and the compliance
details component

feat: added another chip type for a neutral situation

style: change the property card style for the v1 specs

fix: added front facing camera override to schema and components

feat: added authorized override (status) column to the customers list
table

fix: moved name to the front of the phone on the customers list table

fix: added sanctions description text on it's card

fix: added id icon to the right of the customer name

feat: created subpage button component and use it in the customer
profile

feat: created an image popper component and use it in the customer
compliance page

fix: added varying sizes to the customer details and id data cards fields

refactor: simplify the compliance subpage code

new-lamassu-admin/src/pages/Customers/components/TransactionsList.js

@@ -1,25 +1,66 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles, Box } from '@material-ui/core'
 import BigNumber from 'bignumber.js'
 import moment from 'moment'
 import * as R from 'ramda'
 import React from 'react'
 
 import DataTable from 'src/components/tables/DataTable'
-import { H4, Label2 } from 'src/components/typography'
+import { H3, H4, Label1, Label2, P } from 'src/components/typography'
 import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
 import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
 import { toUnit } from 'src/utils/coin'
+import { ifNotNull } from 'src/utils/nullCheck'
 
 import CopyToClipboard from '../../Transactions/CopyToClipboard'
 import mainStyles from '../CustomersList.styles'
 
 const useStyles = makeStyles(mainStyles)
 
-const TransactionsList = ({ data, loading }) => {
+const TransactionsList = ({ customer, data, loading }) => {
   const classes = useStyles()
+  const LastTxIcon = customer.lastTxClass === 'cashOut' ? TxOutIcon : TxInIcon
   const hasData = !(R.isEmpty(data) || R.isNil(data))
 
-  const elements = [
+  const summaryElements = [
+    {
+      header: 'Transactions',
+      size: 127,
+      value: ifNotNull(
+        customer.totalTxs,
+        `${Number.parseInt(customer.totalTxs)}`
+      )
+    },
+    {
+      header: 'Transaction volume',
+      size: 167,
+      value: ifNotNull(
+        customer.totalSpent,
+        `${Number.parseFloat(customer.totalSpent)} ${customer.lastTxFiatCode}`
+      )
+    },
+    {
+      header: 'Last active',
+      size: 142,
+      value: ifNotNull(
+        customer.lastActive,
+        moment.utc(customer.lastActive).format('YYYY-MM-D')
+      )
+    },
+    {
+      header: 'Last transaction',
+      size: 198,
+      value: ifNotNull(
+        customer.lastTxFiat,
+        <>
+          <LastTxIcon className={classes.icon} />
+          {`${Number.parseFloat(customer.lastTxFiat)} 
+            ${customer.lastTxFiatCode}`}
+        </>
+      )
+    }
+  ]
+
+  const tableElements = [
     {
       header: 'Direction',
       width: 207,
@@ -79,6 +120,31 @@ const TransactionsList = ({ data, loading }) => {
 
   return (
     <>
+      <H3>Transactions</H3>
+      <Box display="flex" flexDirection="column">
+        <Box display="flex" mt="auto">
+          {summaryElements.map(({ size, header }, idx) => (
+            <Label1
+              noMargin
+              key={idx}
+              className={classes.label}
+              style={{ width: size }}>
+              {header}
+            </Label1>
+          ))}
+        </Box>
+        <Box display="flex">
+          {summaryElements.map(({ size, value }, idx) => (
+            <P
+              noMargin
+              key={idx}
+              className={classes.value}
+              style={{ width: size }}>
+              {value}
+            </P>
+          ))}
+        </Box>
+      </Box>
       <div className={classes.titleWrapper}>
         <div className={classes.titleAndButtonsContainer}>
           <H4>
@@ -90,7 +156,7 @@ const TransactionsList = ({ data, loading }) => {
           </H4>
         </div>
       </div>
-      {hasData && <DataTable elements={elements} data={data} />}
+      {hasData && <DataTable elements={tableElements} data={data} />}
     </>
   )
 }