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

import { utils as coinUtils } from '@lamassu/coins'
import { makeStyles, Box } from '@material-ui/core'
import BigNumber from 'bignumber.js'
import classnames from 'classnames'
import * as R from 'ramda'
import React from 'react'

import DataTable from 'src/components/tables/DataTable'
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 { ifNotNull } from 'src/utils/nullCheck'
import { formatDate } from 'src/utils/timezones'

import CopyToClipboard from '../../Transactions/CopyToClipboard'
import mainStyles from '../CustomersList.styles'

const useStyles = makeStyles(mainStyles)

const TransactionsList = ({ customer, data, loading, locale }) => {
  const classes = useStyles()
  const LastTxIcon = customer.lastTxClass === 'cashOut' ? TxOutIcon : TxInIcon
  const hasData = !(R.isEmpty(data) || R.isNil(data))

  const timezone = locale.timezone
  const tableSpacingClasses = {
    [classes.titleAndButtonsContainer]: loading || (!loading && !hasData),
    [classes.txTableSpacing]: !loading && hasData
  }

  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:
        !R.isNil(timezone) &&
        ((customer.lastActive &&
          formatDate(customer.lastActive, timezone, 'yyyy-MM-dd')) ??
          '')
    },
    {
      header: 'Last transaction',
      size: 198,
      value: ifNotNull(
        customer.lastTxFiat,
        <>
          <LastTxIcon className={classes.icon} />
          {`${Number.parseFloat(customer.lastTxFiat)} 
            ${customer.lastTxFiatCode}`}
        </>
      )
    }
  ]

  const tableElements = [
    {
      width: 40,
      view: it => (
        <>
          {it.txClass === 'cashOut' ? (
            <TxOutIcon className={classes.txClassIconLeft} />
          ) : (
            <TxInIcon className={classes.txClassIconLeft} />
          )}
        </>
      )
    },
    {
      header: 'Machine',
      width: 160,
      view: R.path(['machineName'])
    },
    {
      header: 'Transaction ID',
      width: 145,
      view: it => (
        <CopyToClipboard className={classes.txId}>{it.id}</CopyToClipboard>
      )
    },
    {
      header: 'Cash',
      width: 155,
      textAlign: 'right',
      view: it => (
        <>
          {`${Number.parseFloat(it.fiat)} `}
          <Label2 inline>{it.fiatCode}</Label2>
        </>
      )
    },
    {
      header: 'Crypto',
      width: 145,
      textAlign: 'right',
      view: it => (
        <>
          {`${coinUtils
            .toUnit(new BigNumber(it.cryptoAtoms), it.cryptoCode)
            .toFormat(5)} `}
          <Label2 inline>{it.cryptoCode}</Label2>
        </>
      )
    },
    {
      header: 'Date',
      width: 100,
      view: it => formatDate(it.created, timezone, 'yyyy-MM-dd')
    },
    {
      header: 'Time (h:m:s)',
      width: 130,
      view: it => formatDate(it.created, timezone, 'HH:mm:ss')
    }
  ]

  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.txSummaryLabel}
              style={{ width: size }}>
              {header}
            </Label1>
          ))}
        </Box>
        <Box display="flex">
          {summaryElements.map(({ size, value }, idx) => (
            <P
              noMargin
              key={idx}
              className={classes.txSummaryValue}
              style={{ width: size }}>
              {value}
            </P>
          ))}
        </Box>
      </Box>
      <div className={classes.titleWrapper}>
        <div className={classnames(tableSpacingClasses)}>
          {loading ? (
            <H4>Loading</H4>
          ) : hasData ? (
            ''
          ) : (
            <H4>No transactions so far</H4>
          )}
        </div>
      </div>
      {hasData && <DataTable elements={tableElements} data={data} />}
    </>
  )
}

export default TransactionsList