+ {children && (
+ <>
+
+
+
+ )}
+
+ )
+}
+
+export default CopyToClipboard
diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DataTable.js b/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DataTable.js
new file mode 100644
index 00000000..76a7abd9
--- /dev/null
+++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DataTable.js
@@ -0,0 +1,188 @@
+import { makeStyles, Box } from '@material-ui/core'
+import classnames from 'classnames'
+import * as R from 'ramda'
+import React, { useState, useEffect } from 'react'
+import {
+ AutoSizer,
+ List,
+ CellMeasurer,
+ CellMeasurerCache
+} from 'react-virtualized'
+
+import {
+ Table,
+ TBody,
+ THead,
+ Tr,
+ Td,
+ Th
+} from 'src/components/fake-table/Table'
+import { H4 } from 'src/components/typography'
+import { ReactComponent as ExpandClosedIcon } from 'src/styling/icons/action/expand/closed.svg'
+import { ReactComponent as ExpandOpenIcon } from 'src/styling/icons/action/expand/open.svg'
+
+import styles from './DataTable.styles'
+
+const useStyles = makeStyles(styles)
+
+const Row = ({
+ id,
+ elements,
+ data,
+ width,
+ Details,
+ expanded,
+ expandRow,
+ expWidth,
+ expandable,
+ onClick
+}) => {
+ const classes = useStyles()
+
+ const hasPointer = onClick || expandable
+ const trClasses = {
+ [classes.pointer]: hasPointer,
+ [classes.row]: true,
+ [classes.expanded]: expanded
+ }
+
+ return (
+
+ {children}
+
+
+
+
+
+
+
+
+ Copied to clipboard!
+
+
+ )
+}
+
+const DataTable = ({
+ elements = [],
+ data = [],
+ Details,
+ className,
+ expandable,
+ initialExpanded,
+ onClick,
+ loading,
+ emptyText,
+ extraHeight,
+ ...props
+}) => {
+ const [expanded, setExpanded] = useState(initialExpanded)
+
+ useEffect(() => setExpanded(initialExpanded), [initialExpanded])
+
+ const coreWidth = R.compose(R.sum, R.map(R.prop('width')))(elements)
+ const expWidth = 1200 - coreWidth
+ const width = coreWidth + (expandable ? expWidth : 0)
+
+ const classes = useStyles({ width })
+
+ const expandRow = id => {
+ setExpanded(id === expanded ? null : id)
+ }
+
+ const cache = new CellMeasurerCache({
+ defaultHeight: 62,
+ fixedWidth: true
+ })
+
+ function rowRenderer({ index, key, parent, style }) {
+ return (
+
+ {
+ expandable && expandRow(id)
+ onClick && onClick(data)
+ }}
+ error={data.error}
+ errorMessage={data.errorMessage}>
+ {elements.map(({ view = it => it?.toString(), ...props }, idx) => (
+
+ {view(data)}
+
+ ))}
+ {expandable && (
+
+
+
+ )}
+
+
+ {expandable && expanded && (
+
+
+
+
+
+
+ )}
+
+
+ |
+
+ | + {header} + | + ))} + {expandable &&} + + + {loading && |
|---|
+
+ )
+}
+
+export default memo(DetailsRow, (prev, next) => prev.id === next.id)
diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DetailsCard.styles.js b/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DetailsCard.styles.js
new file mode 100644
index 00000000..277bcfd2
--- /dev/null
+++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/DetailsCard.styles.js
@@ -0,0 +1,84 @@
+import typographyStyles from 'src/components/typography/styles'
+import { offColor } from 'src/styling/variables'
+
+const { p } = typographyStyles
+
+export default {
+ wrapper: {
+ display: 'flex',
+ flexDirection: 'column',
+ marginTop: 24
+ },
+ row: {
+ display: 'flex',
+ flexDirection: 'row',
+ marginBottom: 36
+ },
+ secondRow: {
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'space-between',
+ marginBottom: 36
+ },
+ lastRow: {
+ display: 'flex',
+ flexDirection: 'row',
+ marginBottom: 32
+ },
+ label: {
+ color: offColor,
+ margin: [[0, 0, 6, 0]]
+ },
+ txIcon: {
+ marginRight: 10
+ },
+ popover: {
+ height: 164,
+ width: 215
+ },
+ idButton: {
+ marginRight: 4
+ },
+ idCardDataCard: {
+ extend: p,
+ display: 'flex',
+ padding: [[11, 8]],
+ // rework this into a proper component
+ '& > div': {
+ display: 'flex',
+ flexDirection: 'column',
+ '& > div': {
+ width: 144,
+ height: 37,
+ marginBottom: 15,
+ '&:last-child': {
+ marginBottom: 0
+ }
+ }
+ }
+ },
+ bold: {
+ fontWeight: 700
+ },
+ direction: {
+ width: 233
+ },
+ availableIds: {
+ width: 232
+ },
+ exchangeRate: {
+ width: 250
+ },
+ commission: {
+ width: 217
+ },
+ address: {
+ width: 280
+ },
+ transactionId: {
+ width: 280
+ },
+ sessionId: {
+ width: 215
+ }
+}
diff --git a/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/Stripes.js b/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/Stripes.js
new file mode 100644
index 00000000..59cf8ce6
--- /dev/null
+++ b/new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/Stripes.js
@@ -0,0 +1,12 @@
+import React from 'react'
+
+import { Td } from 'src/components/fake-table/Table'
+import { ReactComponent as StripesSvg } from 'src/styling/icons/stripes.svg'
+
+const Stripes = ({ width }) => (
+
+
+
+
+
+
+
+
+ {tx.txClass === 'cashOut' ?
+
+
+
+ {tx.customerPhone && (
+
+ {tx.customerPhone}
+
+ )}
+ {tx.customerIdCardPhotoPath && !tx.customerIdCardData && (
+
+ 
+
+ )}
+ {tx.customerIdCardData && (
+
+
+ )}
+ {tx.customerFrontCameraPath && (
+
+ 
+
+ )}
+
+
+
+
+
+
+
+
+
+ {customer.name}
+
+
+
+ {customer.age}
+
+
+
+ {customer.country}
+
+
+
+
+
+ {customer.idCardNumber}
+
+
+
+ {customer.idCardExpirationDate}
+
+
+
+ {crypto > 0 ? displayExRate : '-'}
+
+
+
+
+ {`${commission} ${tx.fiatCode} (${commissionPercentage * 100} %)`}
+
+
+
+
+
+ {tx.txClass === 'cashIn'
+ ? `${Number.parseFloat(tx.cashInFee)} ${tx.fiatCode}`
+ : 'N/A'}
+
+
+
+
+
+
+
+
+ {formatAddress(tx.cryptoCode, tx.toAddress)}
+
+
+
+
+
+
+ {tx.txClass === 'cashOut' ? (
+ 'N/A'
+ ) : (
+ {tx.txHash}
+ )}
+
+
+
+ {tx.id}
+
+
+
+
+
+ {getStatus(tx)}
+
+
+
+
+ {'Details'}
+
+
+
+ {'Cash cassettes'}
+
+
+ {'Latest transactions'}
+
+
+ {'Commissions'}
+
+