64 lines
1.7 KiB
JavaScript
64 lines
1.7 KiB
JavaScript
import { makeStyles } from '@material-ui/core/styles'
|
|
import * as R from 'ramda'
|
|
import React, { memo, useState } from 'react'
|
|
|
|
import { Carousel } from 'src/components/Carousel'
|
|
import { Label1 } from 'src/components/typography'
|
|
import { formatDate } from 'src/utils/timezones'
|
|
|
|
import CopyToClipboard from '../../Transactions/CopyToClipboard'
|
|
|
|
import styles from './PhotosCarousel.styles'
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const PhotosCarousel = memo(({ photosData, timezone }) => {
|
|
const classes = useStyles()
|
|
const [currentIndex, setCurrentIndex] = useState(0)
|
|
|
|
const Label = ({ children }) => {
|
|
const classes = useStyles()
|
|
return <Label1 className={classes.label}>{children}</Label1>
|
|
}
|
|
|
|
const isFaceCustomerPhoto = !R.has('id')(photosData[currentIndex])
|
|
|
|
const slidePhoto = index => setCurrentIndex(index)
|
|
|
|
return (
|
|
<>
|
|
<Carousel photosData={photosData} slidePhoto={slidePhoto} />
|
|
{!isFaceCustomerPhoto && (
|
|
<div className={classes.firstRow}>
|
|
<Label>Session ID</Label>
|
|
<CopyToClipboard>
|
|
{photosData && photosData[currentIndex]?.id}
|
|
</CopyToClipboard>
|
|
</div>
|
|
)}
|
|
<div className={classes.secondRow}>
|
|
<div>
|
|
<>
|
|
<Label>Date</Label>
|
|
<div>
|
|
{photosData &&
|
|
formatDate(
|
|
photosData[currentIndex]?.date,
|
|
timezone,
|
|
'yyyy-MM-dd HH:mm'
|
|
)}
|
|
</div>
|
|
</>
|
|
</div>
|
|
<div>
|
|
<Label>Taken by</Label>
|
|
<div>
|
|
{!isFaceCustomerPhoto ? 'Acceptance of T&C' : 'Compliance scan'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
})
|
|
|
|
export default PhotosCarousel
|