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

lib/new-admin/graphql/schema.js

@@ -224,6 +224,7 @@ const typeDefs = gql`
     customerIdCardPhotoPath: String
     expired: Boolean
     machineName: String
+    discount: Int
   }
 
   type Blacklist {

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

@@ -39,7 +39,8 @@ const DetailsRow = ({ it: tx }) => {
   const crypto = toUnit(new BigNumber(tx.cryptoAtoms), tx.cryptoCode)
   const commissionPercentage = Number.parseFloat(tx.commissionPercentage, 2)
   const commission = Number(fiat * commissionPercentage).toFixed(2)
-  const exchangeRate = Number(fiat / crypto).toFixed(3)
+  const discount = tx.discount ? `-${tx.discount}%` : null
+  const exchangeRate = BigNumber(fiat / crypto).toFormat(2)
   const displayExRate = `1 ${tx.cryptoCode} = ${exchangeRate} ${tx.fiatCode}`
 
   const customer = tx.customerIdCardData && {
@@ -153,8 +154,13 @@ const DetailsRow = ({ it: tx }) => {
         </div>
         <div className={classes.commission}>
           <Label>Commission</Label>
-          <div>
+          <div className={classes.container}>
             {`${commission} ${tx.fiatCode} (${commissionPercentage * 100} %)`}
+            {discount && (
+              <div className={classes.chip}>
+                <Label1 className={classes.chipLabel}>{discount}</Label1>
+              </div>
+            )}
           </div>
         </div>
         <div>

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

@@ -1,5 +1,5 @@
 import typographyStyles from 'src/components/typography/styles'
-import { offColor } from 'src/styling/variables'
+import { offColor, comet, white } from 'src/styling/variables'
 
 const { p } = typographyStyles
 
@@ -79,5 +79,23 @@ export default {
   },
   sessionId: {
     width: 215
+  },
+  container: {
+    display: 'flex'
+  },
+  chip: {
+    display: 'flex',
+    alignItems: 'center',
+    padding: '4px 8px 4px 8px',
+    backgroundColor: comet,
+    color: white,
+    height: 24,
+    marginBottom: -24,
+    marginTop: -3,
+    marginLeft: 7,
+    borderRadius: 4
+  },
+  chipLabel: {
+    color: white
   }
 }

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
     }

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

@@ -84,6 +84,15 @@ const mainStyles = {
     overflow: 'hidden',
     whiteSpace: 'nowrap',
     textOverflow: 'ellipsis'
+  },
+  flexWrapper: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginRight: 16
+  },
+  customerLinkIcon: {
+    marginLeft: 2
   }
 }
 

new-lamassu-admin/src/styling/icons/month arrows/right.svg

@@ -1,17 +1,15 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
-    <desc>Created with Sketch.</desc>
     <defs>
-        <circle id="path-1" cx="10" cy="10" r="10"></circle>
+        <circle id="path-1-right" cx="10" cy="10" r="10"></circle>
     </defs>
     <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="pop-up/action/download-logs/date-range-copy-2" transform="translate(-232.000000, -187.000000)">
             <g id="icon/sf-contain-b-copy-4" transform="translate(242.000000, 197.000000) scale(-1, 1) rotate(-270.000000) translate(-242.000000, -197.000000) translate(232.000000, 187.000000)">
                 <mask id="mask-2" fill="white">
-                    <use xlink:href="#path-1"></use>
+                    <use xlink:href="#path-1-right"></use>
                 </mask>
-                <use id="Mask" fill="#EBEFFF" fill-rule="nonzero" xlink:href="#path-1"></use>
+                <use id="Mask" fill="#EBEFFF" fill-rule="nonzero" xlink:href="#path-1-right"></use>
                 <g id="icon/sf-small/wizzard" mask="url(#mask-2)" stroke-linecap="round" stroke-linejoin="round">
                     <g transform="translate(6.666667, 6.000000)" id="Group">
                         <g>