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 = {
|
||||
popover: {
|
||||
zIndex: 1000,
|
||||
zIndex: 3000,
|
||||
backgroundColor: bgColor,
|
||||
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 { useQuery } from '@apollo/react-hooks'
|
||||
import { gql } from 'apollo-boost'
|
||||
import { makeStyles } from '@material-ui/core'
|
||||
import classnames from 'classnames'
|
||||
|
||||
import { H2, H4, TL1, P } from 'src/components/typography'
|
||||
import { RadioGroup, TextInput } from 'src/components/inputs'
|
||||
import { Button } from 'src/components/buttons'
|
||||
import Popper from 'src/components/Popper'
|
||||
import { Wizard } from 'src/components/wizard'
|
||||
import { H2, P } from 'src/components/typography'
|
||||
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 { ReactComponent as CurrentIcon } from 'src/styling/icons/stage/spring/current.svg'
|
||||
import { ReactComponent as EmptyIcon } from 'src/styling/icons/stage/spring/empty.svg'
|
||||
import Popper from 'src/components/Popper'
|
||||
|
||||
import SelectTriggerDirection from './SelectTriggerDirection'
|
||||
import SelectTriggerType from './SelectTriggerType'
|
||||
import SelectTriggerRequirements from './SelectTriggerRequirements'
|
||||
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(event.currentTarget)
|
||||
const GET_CONFIG = gql`
|
||||
{
|
||||
config
|
||||
}
|
||||
|
||||
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 { data: configResponse } = useQuery(GET_CONFIG)
|
||||
const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null)
|
||||
|
||||
const classes = useStyles()
|
||||
|
||||
const fiatCurrencyCode = configResponse?.config?.['locale_fiatCurrency']?.code
|
||||
|
||||
const handleOpenHelpPopper = event => {
|
||||
setHelpPopperAnchorEl(event.currentTarget)
|
||||
setHelpPopperAnchorEl(helpPopperAnchorEl ? null : event.currentTarget)
|
||||
}
|
||||
|
||||
const handleCloseHelpPopper = () => {
|
||||
|
|
@ -338,9 +39,7 @@ const NewTriggerWizard = ({ finish }) => {
|
|||
|
||||
const helpPopperOpen = Boolean(helpPopperAnchorEl)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={classes.modalHeader}>
|
||||
const wizardHeader = (
|
||||
<div className={classes.rowWrapper}>
|
||||
<H2>New Compliance Trigger</H2>
|
||||
<div className={classes.transparentButton}>
|
||||
|
|
@ -353,27 +52,27 @@ const NewTriggerWizard = ({ finish }) => {
|
|||
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.
|
||||
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}>
|
||||
)
|
||||
|
||||
return (
|
||||
<Wizard
|
||||
header={wizardHeader}
|
||||
nextStepText={'Next'}
|
||||
finalStepText={'Add Trigger'}
|
||||
finish={finish}>
|
||||
<SelectTriggerDirection />
|
||||
<SelectTriggerType />
|
||||
<SelectTriggerType fiatCurrencyCode={fiatCurrencyCode} />
|
||||
<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