lamassu/lamassu-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: soft rework Customers pages

Browse source
This commit is contained in:
Taranto 2020-08-07 18:56:31 +01:00 • committed by Josh Harvey
parent 246f736fa8
commit b853f366f1
27 changed files with 658 additions and 306 deletions
Download patch file Download diff file Expand all files Collapse all files

63
new-lamassu-admin/src/pages/Customers/CustomersList.js
View file

@ -4,10 +4,11 @@ import moment from 'moment'
import * as R from 'ramda'
import React from 'react'
import Title from 'src/components/Title'
import TitleSection from 'src/components/layout/TitleSection'
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 { ifNotNull } from 'src/utils/nullCheck'
import styles from './CustomersList.styles'
@ -17,16 +18,16 @@ const CustomersList = ({ data, onClick }) => {
const classes = useStyles()
const elements = [
{
header: 'Name',
width: 277,
view: R.path(['name'])
},
{
header: 'Phone',
width: 186,
view: it => parsePhoneNumberFromString(it.phone).formatInternational()
},
{
header: 'Name',
width: 277,
view: R.path(['name'])
},
{
header: 'Total TXs',
width: 154,
@ -37,47 +38,43 @@ const CustomersList = ({ data, onClick }) => {
header: 'Total spent',
width: 188,
textAlign: 'right',
view: it => `${Number.parseFloat(it.totalSpent)} ${it.lastTxFiatCode}`
view: it =>
`${Number.parseFloat(it.totalSpent)} ${it.lastTxFiatCode ?? ''}`
},
{
header: 'Last active',
width: 197,
view: it => moment.utc(it.lastActive).format('YYYY-MM-D')
view: it =>
ifNotNull(it.lastActive, moment.utc(it.lastActive).format('YYYY-MM-D'))
},
{
header: 'Last transaction',
width: 198,
textAlign: 'right',
view: it => (
<>
{`${Number.parseFloat(it.lastTxFiat)} ${it.lastTxFiatCode}`}
{it.lastTxClass === 'cashOut' ? (
<TxOutIcon className={classes.txClassIconRight} />
) : (
<TxInIcon className={classes.txClassIconRight} />
)}
</>
)
view: it => {
const hasLastTx = !R.isNil(it.lastTxFiatCode)
const LastTxIcon = it.lastTxClass === 'cashOut' ? TxOutIcon : TxInIcon
const lastIcon = <LastTxIcon className={classes.txClassIconRight} />
return (
<>
{hasLastTx &&
`${parseFloat(it.lastTxFiat)} ${it.lastTxFiatCode ?? ''}`}
{hasLastTx && lastIcon}
</>
)
}
}
]
return (
<>
<div className={classes.titleWrapper}>
<div className={classes.titleAndButtonsContainer}>
<Title>Customers</Title>
</div>
<div className={classes.headerLabels}>
<div>
<TxOutIcon />
<span>Cash-out</span>
</div>
<div>
<TxInIcon />
<span>Cash-in</span>
</div>
</div>
</div>
<TitleSection
title="Customers"
labels={[
{ label: 'Cash-in', icon: <TxInIcon /> },
{ label: 'Cash-out', icon: <TxOutIcon /> }
]}
/>
<DataTable elements={elements} data={data} onClick={onClick} />
</>
)