57 lines
1.5 KiB
JavaScript
57 lines
1.5 KiB
JavaScript
import { makeStyles } from '@material-ui/core'
|
|
import React from 'react'
|
|
import { H1, P } from 'src/components/typography'
|
|
import CustomReqLogo from 'src/styling/icons/compliance/custom-requirement.svg?react'
|
|
|
|
import { Button } from 'src/components/buttons'
|
|
|
|
const styles = {
|
|
logo: {
|
|
maxHeight: 150,
|
|
maxWidth: 200
|
|
},
|
|
title: {
|
|
margin: [[24, 0, 32, 0]]
|
|
},
|
|
text: {
|
|
margin: 0
|
|
},
|
|
button: {
|
|
marginTop: 'auto',
|
|
marginBottom: 58
|
|
},
|
|
modalContent: {
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
alignItems: 'center',
|
|
padding: [[0, 42]],
|
|
flex: 1
|
|
}
|
|
}
|
|
|
|
const useStyles = makeStyles(styles)
|
|
|
|
const WizardSplash = ({ onContinue }) => {
|
|
const classes = useStyles()
|
|
return (
|
|
<div className={classes.modalContent}>
|
|
<CustomReqLogo className={classes.logo} />
|
|
<H1 className={classes.title}>Custom information request</H1>
|
|
<P className={classes.text}>
|
|
A custom information request allows you to have an extra option to ask
|
|
specific information about your customers when adding a trigger that
|
|
isn't an option on the default requirements list.
|
|
</P>
|
|
<P>
|
|
Note that adding a custom information request isn't the same as adding
|
|
triggers. You will still need to add a trigger with the new requirement
|
|
to get this information from your customers.
|
|
</P>
|
|
<Button className={classes.button} onClick={onContinue}>
|
|
Get started
|
|
</Button>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default WizardSplash
|