diff --git a/lib/new-admin/graphql/schema.js b/lib/new-admin/graphql/schema.js index d2af9b1f..6d27b2d9 100644 --- a/lib/new-admin/graphql/schema.js +++ b/lib/new-admin/graphql/schema.js @@ -224,6 +224,7 @@ const typeDefs = gql` customerIdCardPhotoPath: String expired: Boolean machineName: String + discount: Int } type Blacklist { diff --git a/new-lamassu-admin/src/pages/Transactions/DetailsCard.js b/new-lamassu-admin/src/pages/Transactions/DetailsCard.js index f242031e..021c0798 100644 --- a/new-lamassu-admin/src/pages/Transactions/DetailsCard.js +++ b/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 }) => {
-
+
{`${commission} ${tx.fiatCode} (${commissionPercentage * 100} %)`} + {discount && ( +
+ {discount} +
+ )}
diff --git a/new-lamassu-admin/src/pages/Transactions/DetailsCard.styles.js b/new-lamassu-admin/src/pages/Transactions/DetailsCard.styles.js index cca999f3..e2bf3591 100644 --- a/new-lamassu-admin/src/pages/Transactions/DetailsCard.styles.js +++ b/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 } } diff --git a/new-lamassu-admin/src/pages/Transactions/Transactions.js b/new-lamassu-admin/src/pages/Transactions/Transactions.js index 40e24bd2..fa0b148b 100644 --- a/new-lamassu-admin/src/pages/Transactions/Transactions.js +++ b/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' ? : ) }, { 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 => ( +
+
{getCustomerDisplayName(it)}
+
redirect(it.customerId)}> + +
+
+ ) }, { 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 } diff --git a/new-lamassu-admin/src/pages/Transactions/Transactions.styles.js b/new-lamassu-admin/src/pages/Transactions/Transactions.styles.js index 7bbd00ce..68eee341 100644 --- a/new-lamassu-admin/src/pages/Transactions/Transactions.styles.js +++ b/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 } } diff --git a/new-lamassu-admin/src/styling/icons/month arrows/right.svg b/new-lamassu-admin/src/styling/icons/month arrows/right.svg index b66fc920..500673b1 100644 --- a/new-lamassu-admin/src/styling/icons/month arrows/right.svg +++ b/new-lamassu-admin/src/styling/icons/month arrows/right.svg @@ -1,17 +1,15 @@ - - Created with Sketch. - + - + - +