137 lines
3.8 KiB
JavaScript
137 lines
3.8 KiB
JavaScript
import ButtonBase from '@material-ui/core/ButtonBase'
|
|
import Paper from '@material-ui/core/Card'
|
|
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 { InformativeDialog } from 'src/components/InformativeDialog'
|
|
import { Info2, Label1 } from 'src/components/typography'
|
|
import { ReactComponent as CrossedCameraIcon } from 'src/styling/icons/ID/photo/crossed-camera.svg'
|
|
import { URI } from 'src/utils/apollo'
|
|
|
|
import CopyToClipboard from '../../Transactions/CopyToClipboard'
|
|
|
|
import styles from './PhotosCard.styles'
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const Label = ({ children }) => {
|
|
const classes = useStyles()
|
|
return <Label1 className={classes.label}>{children}</Label1>
|
|
}
|
|
|
|
const PhotosCard = memo(({ frontCameraData, txPhotosData }) => {
|
|
const classes = useStyles()
|
|
|
|
const [photosDialog, setPhotosDialog] = useState(false)
|
|
|
|
const mapKeys = pair => {
|
|
const [key, value] = pair
|
|
if (key === 'txCustomerPhotoPath' || key === 'frontCameraPath') {
|
|
return ['path', value]
|
|
}
|
|
if (key === 'txCustomerPhotoAt' || key === 'frontCameraAt') {
|
|
return ['date', value]
|
|
}
|
|
return pair
|
|
}
|
|
|
|
const addPhotoDir = R.map(it => {
|
|
const hasFrontCameraData = R.has('id')(it)
|
|
return hasFrontCameraData
|
|
? { ...it, photoDir: 'operator-data/customersphotos' }
|
|
: { ...it, photoDir: 'front-camera-photo' }
|
|
})
|
|
|
|
const standardizeKeys = R.map(
|
|
R.compose(R.fromPairs, R.map(mapKeys), R.toPairs)
|
|
)
|
|
|
|
const filterByPhotoAvailable = R.filter(
|
|
tx => !R.isNil(tx.date) && !R.isNil(tx.path)
|
|
)
|
|
|
|
const photosData = filterByPhotoAvailable(
|
|
addPhotoDir(standardizeKeys(R.append(frontCameraData, txPhotosData)))
|
|
)
|
|
|
|
const singlePhoto = R.head(photosData)
|
|
|
|
return (
|
|
<>
|
|
<Paper className={classes.photo} elevation={0}>
|
|
<ButtonBase
|
|
disabled={!singlePhoto}
|
|
className={classes.button}
|
|
onClick={() => {
|
|
setPhotosDialog(true)
|
|
}}>
|
|
{singlePhoto ? (
|
|
<div className={classes.container}>
|
|
<img
|
|
className={classes.img}
|
|
src={`${URI}/${singlePhoto.photoDir}/${singlePhoto.path}`}
|
|
alt=""
|
|
/>
|
|
<circle className={classes.circle}>
|
|
<div>
|
|
<Info2>{photosData.length}</Info2>
|
|
</div>
|
|
</circle>
|
|
</div>
|
|
) : (
|
|
<CrossedCameraIcon />
|
|
)}
|
|
</ButtonBase>
|
|
</Paper>
|
|
<InformativeDialog
|
|
open={photosDialog}
|
|
title={`Photo roll`}
|
|
data={<PhotosCarousel photosData={photosData} />}
|
|
onDissmised={() => {
|
|
setPhotosDialog(false)
|
|
}}
|
|
/>
|
|
</>
|
|
)
|
|
})
|
|
|
|
export const PhotosCarousel = memo(({ photosData }) => {
|
|
const classes = useStyles()
|
|
const [currentIndex, setCurrentIndex] = useState(0)
|
|
|
|
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>
|
|
<div>
|
|
<Label>Date</Label>
|
|
<div>{photosData && photosData[currentIndex]?.date}</div>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<Label>Taken by</Label>
|
|
<div>
|
|
{!isFaceCustomerPhoto ? 'Acceptance of T&C' : 'Compliance scan'}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</>
|
|
)
|
|
})
|
|
|
|
export default PhotosCard
|