fix: fixed popper zIndex
feat: get fiat currency code from config refactor: separate components in different files
This commit is contained in:
Liordino Neto
Josh Harvey
parent
059607fee4
commit
0803b98a5e
8 changed files with 482 additions and 351 deletions
|
|
@ -10,7 +10,7 @@ const Popover = ({ children, bgColor = white, arrowSize = 7, ...props }) => {
|
||||||
|
|
||||||
const styles = {
|
const styles = {
|
||||||
popover: {
|
popover: {
|
||||||
zIndex: 1000,
|
zIndex: 3000,
|
||||||
backgroundColor: bgColor,
|
backgroundColor: bgColor,
|
||||||
borderRadius: 4
|
borderRadius: 4
|
||||||
},
|
},
|
||||||
|
|
|
||||||
83
new-lamassu-admin/src/components/wizard/Wizard.js
Normal file
83
new-lamassu-admin/src/components/wizard/Wizard.js
Normal file
|
|
@ -0,0 +1,83 @@
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import { makeStyles } from '@material-ui/core'
|
||||||
|
|
||||||
|
import { Button } from 'src/components/buttons'
|
||||||
|
import { ReactComponent as CompleteIcon } from 'src/styling/icons/stage/spring/complete.svg'
|
||||||
|
import { ReactComponent as CurrentIcon } from 'src/styling/icons/stage/spring/current.svg'
|
||||||
|
import { ReactComponent as EmptyIcon } from 'src/styling/icons/stage/spring/empty.svg'
|
||||||
|
|
||||||
|
import { mainStyles } from './Wizard.styles'
|
||||||
|
|
||||||
|
const useStyles = makeStyles(mainStyles)
|
||||||
|
|
||||||
|
const Wizard = ({ header, nextStepText, finalStepText, finish, children }) => {
|
||||||
|
const [currentStepIndex, setCurrentStepIndex] = useState(0)
|
||||||
|
|
||||||
|
const classes = useStyles()
|
||||||
|
|
||||||
|
const handleMoveToNextStep = nextStepIndex => {
|
||||||
|
const finalStepIndex = children.length - 1
|
||||||
|
|
||||||
|
if (nextStepIndex > finalStepIndex) {
|
||||||
|
finish()
|
||||||
|
} else {
|
||||||
|
setCurrentStepIndex(nextStepIndex)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const currentStep = children[currentStepIndex]
|
||||||
|
const finalStepIndex = children.length - 1
|
||||||
|
const isFinalStep = currentStepIndex === finalStepIndex
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div className={classes.modalHeader}>{header}</div>
|
||||||
|
<div className={classes.modalBody}>
|
||||||
|
<div className={classes.columnWrapper}>
|
||||||
|
{/* TODO: wizard steps icons are a little strange... */}
|
||||||
|
<div className={classes.wizardStepsWrapper}>
|
||||||
|
{children.map((e, i) => {
|
||||||
|
const elementToRender = []
|
||||||
|
|
||||||
|
if (i < currentStepIndex)
|
||||||
|
elementToRender.push(
|
||||||
|
<CompleteIcon key={elementToRender.length} />
|
||||||
|
)
|
||||||
|
else if (i === currentStepIndex)
|
||||||
|
elementToRender.push(
|
||||||
|
<CurrentIcon key={elementToRender.length} />
|
||||||
|
)
|
||||||
|
else
|
||||||
|
elementToRender.push(<EmptyIcon key={elementToRender.length} />)
|
||||||
|
|
||||||
|
if (i < currentStepIndex)
|
||||||
|
elementToRender.push(
|
||||||
|
<div
|
||||||
|
className={classes.reachedStepLine}
|
||||||
|
key={elementToRender.length}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
else if (i < finalStepIndex)
|
||||||
|
elementToRender.push(
|
||||||
|
<div
|
||||||
|
className={classes.unreachedStepLine}
|
||||||
|
key={elementToRender.length}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
|
||||||
|
return elementToRender
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
{currentStep}
|
||||||
|
<div className={classes.bottomRightAligned}>
|
||||||
|
<Button onClick={() => handleMoveToNextStep(currentStepIndex + 1)}>
|
||||||
|
{isFinalStep ? finalStepText : nextStepText}
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Wizard
|
||||||
42
new-lamassu-admin/src/components/wizard/Wizard.styles.js
Normal file
42
new-lamassu-admin/src/components/wizard/Wizard.styles.js
Normal file
|
|
@ -0,0 +1,42 @@
|
||||||
|
import { disabledColor, secondaryColor } from 'src/styling/variables'
|
||||||
|
|
||||||
|
const mainStyles = {
|
||||||
|
columnWrapper: {
|
||||||
|
display: 'flex',
|
||||||
|
flexDirection: 'column',
|
||||||
|
height: '100%',
|
||||||
|
width: '100%'
|
||||||
|
},
|
||||||
|
bottomRightAligned: {
|
||||||
|
alignSelf: 'flex-end',
|
||||||
|
marginLeft: 'auto',
|
||||||
|
marginTop: 'auto'
|
||||||
|
},
|
||||||
|
modalHeader: {
|
||||||
|
display: 'flex',
|
||||||
|
marginBottom: 14
|
||||||
|
},
|
||||||
|
modalBody: {
|
||||||
|
display: 'flex',
|
||||||
|
height: '100%'
|
||||||
|
},
|
||||||
|
wizardStepsWrapper: {
|
||||||
|
display: 'flex',
|
||||||
|
alignItems: 'center',
|
||||||
|
position: 'relative',
|
||||||
|
flex: 'wrap',
|
||||||
|
marginBottom: 10
|
||||||
|
},
|
||||||
|
unreachedStepLine: {
|
||||||
|
width: 24,
|
||||||
|
height: 2,
|
||||||
|
border: `solid 1px ${disabledColor}`
|
||||||
|
},
|
||||||
|
reachedStepLine: {
|
||||||
|
width: 24,
|
||||||
|
height: 2,
|
||||||
|
border: `solid 1px ${secondaryColor}`
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export { mainStyles }
|
||||||
3
new-lamassu-admin/src/components/wizard/index.js
Normal file
3
new-lamassu-admin/src/components/wizard/index.js
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import Wizard from './Wizard'
|
||||||
|
|
||||||
|
export { Wizard }
|
||||||
|
|
@ -1,335 +1,36 @@
|
||||||
import React, { useState } from 'react'
|
import React, { useState } from 'react'
|
||||||
|
import { useQuery } from '@apollo/react-hooks'
|
||||||
|
import { gql } from 'apollo-boost'
|
||||||
import { makeStyles } from '@material-ui/core'
|
import { makeStyles } from '@material-ui/core'
|
||||||
import classnames from 'classnames'
|
|
||||||
|
|
||||||
import { H2, H4, TL1, P } from 'src/components/typography'
|
import { Wizard } from 'src/components/wizard'
|
||||||
import { RadioGroup, TextInput } from 'src/components/inputs'
|
import { H2, P } from 'src/components/typography'
|
||||||
import { Button } from 'src/components/buttons'
|
|
||||||
import Popper from 'src/components/Popper'
|
|
||||||
import { ReactComponent as HelpIcon } from 'src/styling/icons/action/help/zodiac.svg'
|
import { ReactComponent as HelpIcon } from 'src/styling/icons/action/help/zodiac.svg'
|
||||||
import { ReactComponent as CompleteIcon } from 'src/styling/icons/stage/spring/complete.svg'
|
import Popper from 'src/components/Popper'
|
||||||
import { ReactComponent as CurrentIcon } from 'src/styling/icons/stage/spring/current.svg'
|
|
||||||
import { ReactComponent as EmptyIcon } from 'src/styling/icons/stage/spring/empty.svg'
|
|
||||||
|
|
||||||
|
import SelectTriggerDirection from './SelectTriggerDirection'
|
||||||
|
import SelectTriggerType from './SelectTriggerType'
|
||||||
|
import SelectTriggerRequirements from './SelectTriggerRequirements'
|
||||||
import { mainStyles } from './Triggers.styles'
|
import { mainStyles } from './Triggers.styles'
|
||||||
|
|
||||||
const useStyles = makeStyles(mainStyles)
|
const useStyles = makeStyles(mainStyles)
|
||||||
|
|
||||||
const SelectTriggerDirection = () => {
|
const GET_CONFIG = gql`
|
||||||
const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null)
|
{
|
||||||
const [radioGroupValue, setRadioGroupValue] = useState('both')
|
config
|
||||||
|
|
||||||
const classes = useStyles()
|
|
||||||
|
|
||||||
const handleOpenHelpPopper = event => {
|
|
||||||
setHelpPopperAnchorEl(event.currentTarget)
|
|
||||||
}
|
}
|
||||||
|
`
|
||||||
const handleCloseHelpPopper = () => {
|
|
||||||
setHelpPopperAnchorEl(null)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleRadioButtons = newValue => {
|
|
||||||
setRadioGroupValue(newValue)
|
|
||||||
}
|
|
||||||
|
|
||||||
const helpPopperOpen = Boolean(helpPopperAnchorEl)
|
|
||||||
|
|
||||||
const radioButtonOptions = [
|
|
||||||
{ label: 'Both', value: 'both' },
|
|
||||||
{ label: 'Only cash-in', value: 'cash-in' },
|
|
||||||
{ label: 'Only cash-out', value: 'cash-out' }
|
|
||||||
]
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={classes.columnWrapper}>
|
|
||||||
<div className={classes.rowWrapper}>
|
|
||||||
<H4>In which type of transactions will it trigger?</H4>
|
|
||||||
<div className={classes.transparentButton}>
|
|
||||||
<button onClick={handleOpenHelpPopper}>
|
|
||||||
<HelpIcon />
|
|
||||||
<Popper
|
|
||||||
open={helpPopperOpen}
|
|
||||||
anchorEl={helpPopperAnchorEl}
|
|
||||||
placement="bottom"
|
|
||||||
onClose={handleCloseHelpPopper}>
|
|
||||||
<div className={classes.popoverContent}>
|
|
||||||
<P>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
|
|
||||||
tempor velit a dolor ultricies posuere. Proin massa sapien,
|
|
||||||
euismod quis auctor vel, blandit in enim.
|
|
||||||
</P>
|
|
||||||
</div>
|
|
||||||
</Popper>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class={classes.radioGroupWrapper}>
|
|
||||||
<RadioGroup
|
|
||||||
options={radioButtonOptions}
|
|
||||||
value={radioGroupValue}
|
|
||||||
onChange={event => handleRadioButtons(event.target.value)}
|
|
||||||
className={classnames(
|
|
||||||
classes.radioButtons,
|
|
||||||
classes.stepOneRadioButtons
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const SelectTriggerType = () => {
|
|
||||||
const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null)
|
|
||||||
const [radioGroupValue, setRadioGroupValue] = useState('amount')
|
|
||||||
|
|
||||||
const classes = useStyles()
|
|
||||||
|
|
||||||
const handleOpenHelpPopper = event => {
|
|
||||||
setHelpPopperAnchorEl(event.currentTarget)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleCloseHelpPopper = () => {
|
|
||||||
setHelpPopperAnchorEl(null)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleRadioButtons = newValue => {
|
|
||||||
setRadioGroupValue(newValue)
|
|
||||||
}
|
|
||||||
|
|
||||||
const helpPopperOpen = Boolean(helpPopperAnchorEl)
|
|
||||||
|
|
||||||
const radioButtonOptions = [
|
|
||||||
{ label: 'Transaction amount', value: 'amount' },
|
|
||||||
{ label: 'Transaction velocity', value: 'velocity' },
|
|
||||||
{ label: 'Transaction volume', value: 'volume' },
|
|
||||||
{ label: 'Consecutive days', value: 'days' }
|
|
||||||
]
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={classes.columnWrapper}>
|
|
||||||
<div className={classes.rowWrapper}>
|
|
||||||
<H4>Choose trigger type</H4>
|
|
||||||
<div className={classes.transparentButton}>
|
|
||||||
<button onClick={handleOpenHelpPopper}>
|
|
||||||
<HelpIcon />
|
|
||||||
<Popper
|
|
||||||
open={helpPopperOpen}
|
|
||||||
anchorEl={helpPopperAnchorEl}
|
|
||||||
placement="bottom"
|
|
||||||
onClose={handleCloseHelpPopper}>
|
|
||||||
<div className={classes.popoverContent}>
|
|
||||||
<P>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
|
|
||||||
tempor velit a dolor ultricies posuere. Proin massa sapien,
|
|
||||||
euismod quis auctor vel, blandit in enim.
|
|
||||||
</P>
|
|
||||||
</div>
|
|
||||||
</Popper>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class={classes.radioGroupWrapper}>
|
|
||||||
<RadioGroup
|
|
||||||
options={radioButtonOptions}
|
|
||||||
value={radioGroupValue}
|
|
||||||
onChange={event => handleRadioButtons(event.target.value)}
|
|
||||||
className={classnames(
|
|
||||||
classes.radioButtons,
|
|
||||||
classes.stepTwoRadioButtons
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<H4>Threshold</H4>
|
|
||||||
<div className={classes.rowWrapper}>
|
|
||||||
{/* TODO: allow only monetary values */}
|
|
||||||
<TextInput large className={classes.textInput} />
|
|
||||||
{/* TODO: how should we define the fiat code? */}
|
|
||||||
<TL1>EUR</TL1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const SelectTriggerRequirements = () => {
|
|
||||||
const [
|
|
||||||
requirementHelpPopperAnchorEl,
|
|
||||||
setRequirementHelpPopperAnchorEl
|
|
||||||
] = useState(null)
|
|
||||||
const [typeHelpPopperAnchorEl, setTypeHelpPopperAnchorEl] = useState(null)
|
|
||||||
const [requirementRadioGroupValue, setRequirementRadioGroupValue] = useState(
|
|
||||||
'sms'
|
|
||||||
)
|
|
||||||
const [typeRadioGroupValue, setTypeRadioGroupValue] = useState('automatic')
|
|
||||||
|
|
||||||
const classes = useStyles()
|
|
||||||
|
|
||||||
const handleOpenRequirementHelpPopper = event => {
|
|
||||||
setRequirementHelpPopperAnchorEl(event.currentTarget)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleOpenTypeHelpPopper = event => {
|
|
||||||
setTypeHelpPopperAnchorEl(event.currentTarget)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleCloseRequirementHelpPopper = () => {
|
|
||||||
setRequirementHelpPopperAnchorEl(null)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleCloseTypeHelpPopper = () => {
|
|
||||||
setTypeHelpPopperAnchorEl(null)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleRequirementRadioButtons = newValue => {
|
|
||||||
setRequirementRadioGroupValue(newValue)
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleTypeRadioButtons = newValue => {
|
|
||||||
setTypeRadioGroupValue(newValue)
|
|
||||||
}
|
|
||||||
|
|
||||||
const requirementHelpPopperOpen = Boolean(requirementHelpPopperAnchorEl)
|
|
||||||
const typeHelpPopperOpen = Boolean(typeHelpPopperAnchorEl)
|
|
||||||
|
|
||||||
const requirementRadioButtonOptions = [
|
|
||||||
{ label: 'SMS verification', value: 'sms' },
|
|
||||||
{ label: 'ID card image', value: 'id-card' },
|
|
||||||
{ label: 'ID data', value: 'id-data' },
|
|
||||||
{ label: 'Customer camera', value: 'camera' },
|
|
||||||
{ label: 'Sanctions', value: 'sanctions' },
|
|
||||||
{ label: 'Super user', value: 'super-user' },
|
|
||||||
{ label: 'Suspend', value: 'suspend' },
|
|
||||||
{ label: 'Block', value: 'block' }
|
|
||||||
]
|
|
||||||
|
|
||||||
const typeRadioButtonOptions = [
|
|
||||||
{ label: 'Fully automatic', value: 'automatic' },
|
|
||||||
{ label: 'Semi automatic', value: 'semi-automatic' },
|
|
||||||
{ label: 'Manual', value: 'manual' }
|
|
||||||
]
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={classes.columnWrapper}>
|
|
||||||
<div className={classes.rowWrapper}>
|
|
||||||
<H4>Choose a requirement</H4>
|
|
||||||
<div className={classes.transparentButton}>
|
|
||||||
<button onClick={handleOpenRequirementHelpPopper}>
|
|
||||||
<HelpIcon />
|
|
||||||
<Popper
|
|
||||||
open={requirementHelpPopperOpen}
|
|
||||||
anchorEl={requirementHelpPopperAnchorEl}
|
|
||||||
placement="bottom"
|
|
||||||
onClose={handleCloseRequirementHelpPopper}>
|
|
||||||
<div className={classes.popoverContent}>
|
|
||||||
<P>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
|
|
||||||
tempor velit a dolor ultricies posuere. Proin massa sapien,
|
|
||||||
euismod quis auctor vel, blandit in enim.
|
|
||||||
</P>
|
|
||||||
</div>
|
|
||||||
</Popper>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<RadioGroup
|
|
||||||
options={requirementRadioButtonOptions}
|
|
||||||
value={requirementRadioGroupValue}
|
|
||||||
onChange={event => handleRequirementRadioButtons(event.target.value)}
|
|
||||||
className={classnames(
|
|
||||||
classes.radioButtons,
|
|
||||||
classes.stepThreeRadioButtons
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
<div className={classes.rowWrapper}>
|
|
||||||
{/* TODO: why there's a trigger type property two times? Here and on the prior step */}
|
|
||||||
<H4>Choose trigger type</H4>
|
|
||||||
<div className={classes.transparentButton}>
|
|
||||||
<button onClick={handleOpenTypeHelpPopper}>
|
|
||||||
<HelpIcon />
|
|
||||||
<Popper
|
|
||||||
open={typeHelpPopperOpen}
|
|
||||||
anchorEl={typeHelpPopperAnchorEl}
|
|
||||||
placement="bottom"
|
|
||||||
onClose={handleCloseTypeHelpPopper}>
|
|
||||||
<div className={classes.popoverContent}>
|
|
||||||
<P>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
|
|
||||||
tempor velit a dolor ultricies posuere. Proin massa sapien,
|
|
||||||
euismod quis auctor vel, blandit in enim.
|
|
||||||
</P>
|
|
||||||
</div>
|
|
||||||
</Popper>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<RadioGroup
|
|
||||||
options={typeRadioButtonOptions}
|
|
||||||
value={typeRadioGroupValue}
|
|
||||||
onChange={event => handleTypeRadioButtons(event.target.value)}
|
|
||||||
className={classnames(
|
|
||||||
classes.radioButtons,
|
|
||||||
classes.stepThreeRadioButtons
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const Wizard = ({ nextStepText, finalStepText, finish, children }) => {
|
|
||||||
const [currentStepIndex, setCurrentStepIndex] = useState(0)
|
|
||||||
|
|
||||||
const classes = useStyles()
|
|
||||||
|
|
||||||
const handleMoveToNextStep = nextStepIndex => {
|
|
||||||
const finalStepIndex = children.length - 1
|
|
||||||
|
|
||||||
if (nextStepIndex > finalStepIndex) {
|
|
||||||
finish()
|
|
||||||
} else {
|
|
||||||
setCurrentStepIndex(nextStepIndex)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const currentStep = children[currentStepIndex]
|
|
||||||
const finalStepIndex = children.length - 1
|
|
||||||
const isFinalStep = currentStepIndex === finalStepIndex
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className={classes.columnWrapper}>
|
|
||||||
{/* TODO: wizard steps icons are a little strange... */}
|
|
||||||
<div className={classes.wizardStepsWrapper}>
|
|
||||||
{children.map((e, i) => {
|
|
||||||
const elementToRender = []
|
|
||||||
|
|
||||||
if (i < currentStepIndex) elementToRender.push(<CompleteIcon />)
|
|
||||||
else if (i === currentStepIndex) elementToRender.push(<CurrentIcon />)
|
|
||||||
else elementToRender.push(<EmptyIcon />)
|
|
||||||
|
|
||||||
if (i < currentStepIndex)
|
|
||||||
elementToRender.push(<div className={classes.reachedStepLine} />)
|
|
||||||
else if (i < finalStepIndex)
|
|
||||||
elementToRender.push(<div className={classes.unreachedStepLine} />)
|
|
||||||
|
|
||||||
return elementToRender
|
|
||||||
})}
|
|
||||||
</div>
|
|
||||||
{currentStep}
|
|
||||||
<div className={classes.bottomRightAligned}>
|
|
||||||
<Button onClick={() => handleMoveToNextStep(currentStepIndex + 1)}>
|
|
||||||
{isFinalStep ? finalStepText : nextStepText}
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const NewTriggerWizard = ({ finish }) => {
|
const NewTriggerWizard = ({ finish }) => {
|
||||||
|
const { data: configResponse } = useQuery(GET_CONFIG)
|
||||||
const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null)
|
const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null)
|
||||||
|
|
||||||
const classes = useStyles()
|
const classes = useStyles()
|
||||||
|
|
||||||
|
const fiatCurrencyCode = configResponse?.config?.['locale_fiatCurrency']?.code
|
||||||
|
|
||||||
const handleOpenHelpPopper = event => {
|
const handleOpenHelpPopper = event => {
|
||||||
setHelpPopperAnchorEl(event.currentTarget)
|
setHelpPopperAnchorEl(helpPopperAnchorEl ? null : event.currentTarget)
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleCloseHelpPopper = () => {
|
const handleCloseHelpPopper = () => {
|
||||||
|
|
@ -338,42 +39,40 @@ const NewTriggerWizard = ({ finish }) => {
|
||||||
|
|
||||||
const helpPopperOpen = Boolean(helpPopperAnchorEl)
|
const helpPopperOpen = Boolean(helpPopperAnchorEl)
|
||||||
|
|
||||||
|
const wizardHeader = (
|
||||||
|
<div className={classes.rowWrapper}>
|
||||||
|
<H2>New Compliance Trigger</H2>
|
||||||
|
<div className={classes.transparentButton}>
|
||||||
|
<button onClick={handleOpenHelpPopper}>
|
||||||
|
<HelpIcon />
|
||||||
|
<Popper
|
||||||
|
open={helpPopperOpen}
|
||||||
|
anchorEl={helpPopperAnchorEl}
|
||||||
|
placement="bottom"
|
||||||
|
onClose={handleCloseHelpPopper}>
|
||||||
|
<div className={classes.popoverContent}>
|
||||||
|
<P>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
|
||||||
|
tempor velit a dolor ultricies posuere. Proin massa sapien,
|
||||||
|
euismod quis auctor vel, blandit in enim.
|
||||||
|
</P>
|
||||||
|
</div>
|
||||||
|
</Popper>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<Wizard
|
||||||
<div className={classes.modalHeader}>
|
header={wizardHeader}
|
||||||
<div className={classes.rowWrapper}>
|
nextStepText={'Next'}
|
||||||
<H2>New Compliance Trigger</H2>
|
finalStepText={'Add Trigger'}
|
||||||
<div className={classes.transparentButton}>
|
finish={finish}>
|
||||||
<button onClick={handleOpenHelpPopper}>
|
<SelectTriggerDirection />
|
||||||
<HelpIcon />
|
<SelectTriggerType fiatCurrencyCode={fiatCurrencyCode} />
|
||||||
<Popper
|
<SelectTriggerRequirements />
|
||||||
open={helpPopperOpen}
|
</Wizard>
|
||||||
anchorEl={helpPopperAnchorEl}
|
|
||||||
placement="bottom"
|
|
||||||
onClose={handleCloseHelpPopper}>
|
|
||||||
<div className={classes.popoverContent}>
|
|
||||||
<P>
|
|
||||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
|
|
||||||
Morbi tempor velit a dolor ultricies posuere. Proin massa
|
|
||||||
sapien, euismod quis auctor vel, blandit in enim.
|
|
||||||
</P>
|
|
||||||
</div>
|
|
||||||
</Popper>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className={classes.modalBody}>
|
|
||||||
<Wizard
|
|
||||||
nextStepText={'Next'}
|
|
||||||
finalStepText={'Add Trigger'}
|
|
||||||
finish={finish}>
|
|
||||||
<SelectTriggerDirection />
|
|
||||||
<SelectTriggerType />
|
|
||||||
<SelectTriggerRequirements />
|
|
||||||
</Wizard>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,77 @@
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import { makeStyles } from '@material-ui/core'
|
||||||
|
import classnames from 'classnames'
|
||||||
|
|
||||||
|
import { H4, P } from 'src/components/typography'
|
||||||
|
import { RadioGroup } from 'src/components/inputs'
|
||||||
|
import Popper from 'src/components/Popper'
|
||||||
|
import { ReactComponent as HelpIcon } from 'src/styling/icons/action/help/zodiac.svg'
|
||||||
|
|
||||||
|
import { mainStyles } from './Triggers.styles'
|
||||||
|
|
||||||
|
const useStyles = makeStyles(mainStyles)
|
||||||
|
|
||||||
|
const SelectTriggerDirection = () => {
|
||||||
|
const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null)
|
||||||
|
const [radioGroupValue, setRadioGroupValue] = useState('both')
|
||||||
|
|
||||||
|
const classes = useStyles()
|
||||||
|
|
||||||
|
const handleOpenHelpPopper = event => {
|
||||||
|
setHelpPopperAnchorEl(helpPopperAnchorEl ? null : event.currentTarget)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCloseHelpPopper = () => {
|
||||||
|
setHelpPopperAnchorEl(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleRadioButtons = newValue => {
|
||||||
|
setRadioGroupValue(newValue)
|
||||||
|
}
|
||||||
|
|
||||||
|
const helpPopperOpen = Boolean(helpPopperAnchorEl)
|
||||||
|
|
||||||
|
const radioButtonOptions = [
|
||||||
|
{ label: 'Both', value: 'both' },
|
||||||
|
{ label: 'Only cash-in', value: 'cash-in' },
|
||||||
|
{ label: 'Only cash-out', value: 'cash-out' }
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={classes.columnWrapper}>
|
||||||
|
<div className={classes.rowWrapper}>
|
||||||
|
<H4>In which type of transactions will it trigger?</H4>
|
||||||
|
<div className={classes.transparentButton}>
|
||||||
|
<button onClick={handleOpenHelpPopper}>
|
||||||
|
<HelpIcon />
|
||||||
|
<Popper
|
||||||
|
open={helpPopperOpen}
|
||||||
|
anchorEl={helpPopperAnchorEl}
|
||||||
|
placement="bottom"
|
||||||
|
onClose={handleCloseHelpPopper}>
|
||||||
|
<div className={classes.popoverContent}>
|
||||||
|
<P>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
|
||||||
|
tempor velit a dolor ultricies posuere. Proin massa sapien,
|
||||||
|
euismod quis auctor vel, blandit in enim.
|
||||||
|
</P>
|
||||||
|
</div>
|
||||||
|
</Popper>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={classes.radioGroupWrapper}>
|
||||||
|
<RadioGroup
|
||||||
|
options={radioButtonOptions}
|
||||||
|
value={radioGroupValue}
|
||||||
|
onChange={event => handleRadioButtons(event.target.value)}
|
||||||
|
className={classnames(
|
||||||
|
classes.radioButtons,
|
||||||
|
classes.stepOneRadioButtons
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
export default SelectTriggerDirection
|
||||||
|
|
@ -0,0 +1,142 @@
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import { makeStyles } from '@material-ui/core'
|
||||||
|
import classnames from 'classnames'
|
||||||
|
|
||||||
|
import { H4, P } from 'src/components/typography'
|
||||||
|
import { RadioGroup } from 'src/components/inputs'
|
||||||
|
import Popper from 'src/components/Popper'
|
||||||
|
import { ReactComponent as HelpIcon } from 'src/styling/icons/action/help/zodiac.svg'
|
||||||
|
|
||||||
|
import { mainStyles } from './Triggers.styles'
|
||||||
|
|
||||||
|
const useStyles = makeStyles(mainStyles)
|
||||||
|
|
||||||
|
const SelectTriggerRequirements = () => {
|
||||||
|
const [
|
||||||
|
requirementHelpPopperAnchorEl,
|
||||||
|
setRequirementHelpPopperAnchorEl
|
||||||
|
] = useState(null)
|
||||||
|
const [typeHelpPopperAnchorEl, setTypeHelpPopperAnchorEl] = useState(null)
|
||||||
|
const [requirementRadioGroupValue, setRequirementRadioGroupValue] = useState(
|
||||||
|
'sms'
|
||||||
|
)
|
||||||
|
const [typeRadioGroupValue, setTypeRadioGroupValue] = useState('automatic')
|
||||||
|
|
||||||
|
const classes = useStyles()
|
||||||
|
|
||||||
|
const handleOpenRequirementHelpPopper = event => {
|
||||||
|
setRequirementHelpPopperAnchorEl(
|
||||||
|
requirementHelpPopperAnchorEl ? null : event.currentTarget
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleOpenTypeHelpPopper = event => {
|
||||||
|
setTypeHelpPopperAnchorEl(
|
||||||
|
typeHelpPopperAnchorEl ? null : event.currentTarget
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCloseRequirementHelpPopper = () => {
|
||||||
|
setRequirementHelpPopperAnchorEl(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCloseTypeHelpPopper = () => {
|
||||||
|
setTypeHelpPopperAnchorEl(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleRequirementRadioButtons = newValue => {
|
||||||
|
setRequirementRadioGroupValue(newValue)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleTypeRadioButtons = newValue => {
|
||||||
|
setTypeRadioGroupValue(newValue)
|
||||||
|
}
|
||||||
|
|
||||||
|
const requirementHelpPopperOpen = Boolean(requirementHelpPopperAnchorEl)
|
||||||
|
const typeHelpPopperOpen = Boolean(typeHelpPopperAnchorEl)
|
||||||
|
|
||||||
|
const requirementRadioButtonOptions = [
|
||||||
|
{ label: 'SMS verification', value: 'sms' },
|
||||||
|
{ label: 'ID card image', value: 'id-card' },
|
||||||
|
{ label: 'ID data', value: 'id-data' },
|
||||||
|
{ label: 'Customer camera', value: 'camera' },
|
||||||
|
{ label: 'Sanctions', value: 'sanctions' },
|
||||||
|
{ label: 'Super user', value: 'super-user' },
|
||||||
|
{ label: 'Suspend', value: 'suspend' },
|
||||||
|
{ label: 'Block', value: 'block' }
|
||||||
|
]
|
||||||
|
|
||||||
|
const typeRadioButtonOptions = [
|
||||||
|
{ label: 'Fully automatic', value: 'automatic' },
|
||||||
|
{ label: 'Semi automatic', value: 'semi-automatic' },
|
||||||
|
{ label: 'Manual', value: 'manual' }
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={classes.columnWrapper}>
|
||||||
|
<div className={classes.rowWrapper}>
|
||||||
|
<H4>Choose a requirement</H4>
|
||||||
|
<div className={classes.transparentButton}>
|
||||||
|
<button onClick={handleOpenRequirementHelpPopper}>
|
||||||
|
<HelpIcon />
|
||||||
|
<Popper
|
||||||
|
open={requirementHelpPopperOpen}
|
||||||
|
anchorEl={requirementHelpPopperAnchorEl}
|
||||||
|
placement="bottom"
|
||||||
|
onClose={handleCloseRequirementHelpPopper}>
|
||||||
|
<div className={classes.popoverContent}>
|
||||||
|
<P>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
|
||||||
|
tempor velit a dolor ultricies posuere. Proin massa sapien,
|
||||||
|
euismod quis auctor vel, blandit in enim.
|
||||||
|
</P>
|
||||||
|
</div>
|
||||||
|
</Popper>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<RadioGroup
|
||||||
|
options={requirementRadioButtonOptions}
|
||||||
|
value={requirementRadioGroupValue}
|
||||||
|
onChange={event => handleRequirementRadioButtons(event.target.value)}
|
||||||
|
className={classnames(
|
||||||
|
classes.radioButtons,
|
||||||
|
classes.stepThreeRadioButtons
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div className={classes.rowWrapper}>
|
||||||
|
{/* TODO: why there's a trigger type property two times? Here and on the prior step */}
|
||||||
|
<H4>Choose trigger type</H4>
|
||||||
|
<div className={classes.transparentButton}>
|
||||||
|
<button onClick={handleOpenTypeHelpPopper}>
|
||||||
|
<HelpIcon />
|
||||||
|
<Popper
|
||||||
|
open={typeHelpPopperOpen}
|
||||||
|
anchorEl={typeHelpPopperAnchorEl}
|
||||||
|
placement="bottom"
|
||||||
|
onClose={handleCloseTypeHelpPopper}>
|
||||||
|
<div className={classes.popoverContent}>
|
||||||
|
<P>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
|
||||||
|
tempor velit a dolor ultricies posuere. Proin massa sapien,
|
||||||
|
euismod quis auctor vel, blandit in enim.
|
||||||
|
</P>
|
||||||
|
</div>
|
||||||
|
</Popper>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<RadioGroup
|
||||||
|
options={typeRadioButtonOptions}
|
||||||
|
value={typeRadioGroupValue}
|
||||||
|
onChange={event => handleTypeRadioButtons(event.target.value)}
|
||||||
|
className={classnames(
|
||||||
|
classes.radioButtons,
|
||||||
|
classes.stepThreeRadioButtons
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SelectTriggerRequirements
|
||||||
85
new-lamassu-admin/src/pages/Triggers/SelectTriggerType.js
Normal file
85
new-lamassu-admin/src/pages/Triggers/SelectTriggerType.js
Normal file
|
|
@ -0,0 +1,85 @@
|
||||||
|
import React, { useState } from 'react'
|
||||||
|
import { makeStyles } from '@material-ui/core'
|
||||||
|
import classnames from 'classnames'
|
||||||
|
|
||||||
|
import { H4, TL1, P } from 'src/components/typography'
|
||||||
|
import { RadioGroup, TextInput } from 'src/components/inputs'
|
||||||
|
import Popper from 'src/components/Popper'
|
||||||
|
import { ReactComponent as HelpIcon } from 'src/styling/icons/action/help/zodiac.svg'
|
||||||
|
|
||||||
|
import { mainStyles } from './Triggers.styles'
|
||||||
|
|
||||||
|
const useStyles = makeStyles(mainStyles)
|
||||||
|
|
||||||
|
const SelectTriggerType = ({ fiatCurrencyCode }) => {
|
||||||
|
const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null)
|
||||||
|
const [radioGroupValue, setRadioGroupValue] = useState('amount')
|
||||||
|
|
||||||
|
const classes = useStyles()
|
||||||
|
|
||||||
|
const handleOpenHelpPopper = event => {
|
||||||
|
setHelpPopperAnchorEl(helpPopperAnchorEl ? null : event.currentTarget)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleCloseHelpPopper = () => {
|
||||||
|
setHelpPopperAnchorEl(null)
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleRadioButtons = newValue => {
|
||||||
|
setRadioGroupValue(newValue)
|
||||||
|
}
|
||||||
|
|
||||||
|
const helpPopperOpen = Boolean(helpPopperAnchorEl)
|
||||||
|
|
||||||
|
const radioButtonOptions = [
|
||||||
|
{ label: 'Transaction amount', value: 'amount' },
|
||||||
|
{ label: 'Transaction velocity', value: 'velocity' },
|
||||||
|
{ label: 'Transaction volume', value: 'volume' },
|
||||||
|
{ label: 'Consecutive days', value: 'days' }
|
||||||
|
]
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className={classes.columnWrapper}>
|
||||||
|
<div className={classes.rowWrapper}>
|
||||||
|
<H4>Choose trigger type</H4>
|
||||||
|
<div className={classes.transparentButton}>
|
||||||
|
<button onClick={handleOpenHelpPopper}>
|
||||||
|
<HelpIcon />
|
||||||
|
<Popper
|
||||||
|
open={helpPopperOpen}
|
||||||
|
anchorEl={helpPopperAnchorEl}
|
||||||
|
placement="bottom"
|
||||||
|
onClose={handleCloseHelpPopper}>
|
||||||
|
<div className={classes.popoverContent}>
|
||||||
|
<P>
|
||||||
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
|
||||||
|
tempor velit a dolor ultricies posuere. Proin massa sapien,
|
||||||
|
euismod quis auctor vel, blandit in enim.
|
||||||
|
</P>
|
||||||
|
</div>
|
||||||
|
</Popper>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className={classes.radioGroupWrapper}>
|
||||||
|
<RadioGroup
|
||||||
|
options={radioButtonOptions}
|
||||||
|
value={radioGroupValue}
|
||||||
|
onChange={event => handleRadioButtons(event.target.value)}
|
||||||
|
className={classnames(
|
||||||
|
classes.radioButtons,
|
||||||
|
classes.stepTwoRadioButtons
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<H4>Threshold</H4>
|
||||||
|
<div className={classes.rowWrapper}>
|
||||||
|
{/* TODO: allow only monetary values */}
|
||||||
|
<TextInput large className={classes.textInput} />
|
||||||
|
<TL1>{fiatCurrencyCode}</TL1>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default SelectTriggerType
|
||||||
Loading…
Add table
Add a link
Reference in a new issue