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

feat: overview rework and customer data mosaic view

Browse source
This commit is contained in:
José Oliveira 2021-09-17 11:32:43 +01:00
parent 3102c2bef0
commit 4b461c0a57
8 changed files with 376 additions and 43 deletions
Download patch file Download diff file Expand all files Collapse all files

168
new-lamassu-admin/src/pages/Customers/CustomerData.js Normal file
View file

@ -0,0 +1,168 @@
import { Box, CardContent, Card } from '@material-ui/core'
import Grid from '@material-ui/core/Grid'
import { makeStyles } from '@material-ui/core/styles'
import moment from 'moment'
import * as R from 'ramda'
import { useState, React } from 'react'
import { Tooltip } from 'src/components/Tooltip'
import { SubpageButton } from 'src/components/buttons'
import { H3 } from 'src/components/typography'
import { ReactComponent as CardIcon } from 'src/styling/icons/ID/card/comet.svg'
import { ReactComponent as PhoneIcon } from 'src/styling/icons/ID/phone/comet.svg'
import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/disabled.svg'
import { ReactComponent as ReverseListingViewIcon } from 'src/styling/icons/circle buttons/listing-view/white.svg'
import { ReactComponent as ListingViewIcon } from 'src/styling/icons/circle buttons/listing-view/zodiac.svg'
import { ifNotNull } from 'src/utils/nullCheck'
import styles from './CustomerData.styles.js'
import { Field } from './components'
import { getName } from './helper.js'
const useStyles = makeStyles(styles)
const CustomerData = ({ customer, updateCustomer }) => {
const classes = useStyles()
const idData = R.path(['idCardData'])(customer)
const rawExpirationDate = R.path(['expirationDate'])(idData)
const country = R.path(['country'])(idData)
const rawDob = R.path(['dateOfBirth'])(idData)
const nameElements = [
{
header: 'Name',
display: `${getName(customer)}`,
size: 190
}
]
const idScanElementsFirstRow = [
{
header: 'Name',
display: `${getName(customer)}`,
size: 190
},
{
header: 'ID number',
display: R.path(['documentNumber'])(idData),
size: 160
},
{
header: 'Age',
display: ifNotNull(
rawDob,
moment.utc().diff(moment.utc(rawDob).format('YYYY-MM-DD'), 'years')
),
size: 50
}
]
const idScanElementsSecondRow = [
{
header: 'Gender',
display: R.path(['gender'])(idData),
size: 80
},
{
header: country === 'Canada' ? 'Province' : 'State',
display: R.path(['state'])(idData),
size: 120
},
{
header: 'Expiration Date',
display: ifNotNull(
rawExpirationDate,
moment.utc(rawExpirationDate).format('YYYY-MM-DD')
)
}
]
const [listView, setListView] = useState(false)
return (
<div>
<div className={classes.header}>
<H3 className={classes.title}>{'Customer data'}</H3>
<SubpageButton
className={classes.subpageButton}
Icon={ListingViewIcon}
InverseIcon={ReverseListingViewIcon}
toggle={setListView}></SubpageButton>
</div>
<div>
{listView && <H3>{''}</H3>}
{!listView && (
<Grid container>
<Grid container direction="column" item xs={6}>
<Card className={classes.leftSideCard}>
<CardContent>
<div className={classes.cardHeader}>
<EditIcon className={classes.editIcon} />
<H3 className={classes.cardTitle}>{'Name'}</H3>
<Tooltip width={304}></Tooltip>
</div>
<Box display="flex" alignItems="center">
{nameElements.map(({ header, display, size }, idx) => (
<Field
key={idx}
label={header}
display={display}
size={size}
/>
))}
</Box>
</CardContent>
</Card>
<Card className={classes.leftSideCard}>
<CardContent>
<div className={classes.cardHeader}>
<PhoneIcon className={classes.cardIcon} />
<H3 className={classes.cardTitle}>{'ID Scan'}</H3>
<Tooltip width={304}></Tooltip>
</div>
<Box display="flex" alignItems="center">
{idScanElementsFirstRow.map(
({ header, display, size }, idx) => (
<Field
key={idx}
label={header}
display={display}
size={size}
/>
)
)}
</Box>
<Box display="flex" alignItems="center">
{idScanElementsSecondRow.map(
({ header, display, size }, idx) => (
<Field
key={idx}
label={header}
display={display}
size={size}
/>
)
)}
</Box>
</CardContent>
</Card>
</Grid>
<Grid container direction="column" item xs={6}>
<Card className={classes.rightSideCard}>
<CardContent>
<div className={classes.cardHeader}>
<CardIcon className={classes.cardIcon} />
<H3 className={classes.cardTitle}>{'SMS Confirmation'}</H3>
<Tooltip width={304}></Tooltip>
</div>
</CardContent>
</Card>
</Grid>
</Grid>
)}
</div>
</div>
)
}
export default CustomerData