Feat: add discount chip and link to customer from transaction row

new-lamassu-admin/src/pages/Transactions/Transactions.js

@@ -5,12 +5,14 @@ import gql from 'graphql-tag'
 import moment from 'moment'
 import * as R from 'ramda'
 import React from 'react'
+import { useHistory } from 'react-router-dom'
 
 import LogsDowloaderPopover from 'src/components/LogsDownloaderPopper'
 import Title from 'src/components/Title'
 import DataTable from 'src/components/tables/DataTable'
 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 { ReactComponent as CustomerLinkIcon } from 'src/styling/icons/month arrows/right.svg'
 import { toUnit, formatCryptoAddress } from 'src/utils/coin'
 
 import DetailsRow from './DetailsCard'
@@ -54,19 +56,25 @@ const GET_TRANSACTIONS = gql`
       customerIdCardPhotoPath
       customerFrontCameraPath
       customerPhone
+      discount
+      customerId
     }
   }
 `
 
 const Transactions = () => {
   const classes = useStyles()
-
+  const history = useHistory()
   const { data: txResponse, loading } = useQuery(GET_TRANSACTIONS, {
     variables: {
       limit: NUM_LOG_RESULTS
     }
   })
 
+  const redirect = customerId => {
+    return history.push(`/compliance/customer/${customerId}`)
+  }
+
   const formatCustomerName = customer => {
     const { firstName, lastName } = customer
 
@@ -74,7 +82,6 @@ const Transactions = () => {
   }
 
   const getCustomerDisplayName = tx => {
-    console.log(tx)
     if (tx.customerName) return tx.customerName
     if (tx.customerIdCardData) return formatCustomerName(tx.customerIdCardData)
     return tx.customerPhone
@@ -83,26 +90,33 @@ const Transactions = () => {
   const elements = [
     {
       header: '',
-      width: 62,
+      width: 32,
       size: 'sm',
       view: it => (it.txClass === 'cashOut' ? <TxOutIcon /> : <TxInIcon />)
     },
     {
       header: 'Machine',
       name: 'machineName',
-      width: 180,
+      width: 160,
       size: 'sm',
       view: R.path(['machineName'])
     },
     {
       header: 'Customer',
-      width: 162,
+      width: 202,
       size: 'sm',
-      view: getCustomerDisplayName
+      view: it => (
+        <div className={classes.flexWrapper}>
+          <div className={classes.overflowTd}>{getCustomerDisplayName(it)}</div>
+          <div onClick={() => redirect(it.customerId)}>
+            <CustomerLinkIcon className={classes.customerLinkIcon} />
+          </div>
+        </div>
+      )
     },
     {
       header: 'Cash',
-      width: 144,
+      width: 104,
       textAlign: 'right',
       size: 'sm',
       view: it => `${Number.parseFloat(it.fiat)} ${it.fiatCode}`
@@ -126,14 +140,22 @@ const Transactions = () => {
     },
     {
       header: 'Date (UTC)',
-      view: it => moment.utc(it.created).format('YYYY-MM-DD HH:mm:ss'),
+      view: it => moment.utc(it.created).format('YYYY-MM-DD'),
       textAlign: 'right',
       size: 'sm',
-      width: 200
+      width: 130
+    },
+    {
+      header: 'Time (UTC)',
+      view: it => moment.utc(it.created).format('HH:mm:ss'),
+      textAlign: 'right',
+      size: 'sm',
+      width: 130
     },
     {
       header: 'Status',
       view: it => getStatus(it),
+      textAlign: 'left',
       size: 'sm',
       width: 80
     }