76 lines
2 KiB
JavaScript
76 lines
2 KiB
JavaScript
import { makeStyles } from '@material-ui/core'
|
|
import React from 'react'
|
|
|
|
import { Button } from 'src/components/buttons'
|
|
import { H1, P, Info2 } from 'src/components/typography'
|
|
import cassetteOne from 'src/styling/icons/cassettes/cashout-cassette-1.svg'
|
|
import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/comet.svg'
|
|
|
|
const styles = {
|
|
button: {
|
|
margin: [[35, 'auto', 0, 'auto']]
|
|
},
|
|
modalContent: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
padding: [[0, 34]]
|
|
},
|
|
splashTitle: {
|
|
marginTop: 15
|
|
},
|
|
warningInfo: {
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
alignItems: 'center',
|
|
marginTop: 15
|
|
},
|
|
warningIcon: {
|
|
width: 25,
|
|
height: 25,
|
|
marginRight: 8,
|
|
display: 'block'
|
|
},
|
|
warningText: {
|
|
flexBasis: '100%',
|
|
flexGrow: 1
|
|
}
|
|
}
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const WizardSplash = ({ name, onContinue }) => {
|
|
const classes = useStyles()
|
|
|
|
return (
|
|
<div className={classes.modalContent}>
|
|
<img width="148" height="196" alt="cassette" src={cassetteOne}></img>
|
|
<H1 className={classes.splashTitle} noMargin>
|
|
Update counts
|
|
</H1>
|
|
<Info2 className={classes.machineName} noMargin>
|
|
{name}
|
|
</Info2>
|
|
<div className={classes.warningInfo}>
|
|
<WarningIcon className={classes.warningIcon} />
|
|
<P noMargin className={classes.warningText}>
|
|
Before updating counts on Lamassu Admin, make sure you've done it
|
|
before on the machines.
|
|
</P>
|
|
</div>
|
|
<div className={classes.warningInfo}>
|
|
<WarningIcon className={classes.warningIcon} />
|
|
<P noMargin className={classes.warningText}>
|
|
For cash-out cassettes, please make sure you've removed the remaining
|
|
bills before adding the new ones.
|
|
</P>
|
|
</div>
|
|
<Button className={classes.button} onClick={onContinue}>
|
|
Get started
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default WizardSplash
|