diff --git a/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js b/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js
index 07f049d9..244c1420 100644
--- a/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js
+++ b/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js
@@ -1,11 +1,10 @@
import React, { useState } from 'react'
-import { makeStyles, Paper } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core'
-import { H2, H4, P } from 'src/components/typography'
-import { RadioGroup } from 'src/components/inputs'
+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 { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
import { ReactComponent as HelpIcon } from 'src/styling/icons/action/help/zodiac.svg'
import { mainStyles } from './Triggers.styles'
@@ -61,21 +60,241 @@ const SelectTriggerDirection = () => {
+
+ handleRadioButtons(event.target.value)}
+ className={classes.radioButtons}
+ />
+
+ >
+ )
+}
+
+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 (
+ <>
+
+
Choose trigger type
+
+
+
+
+
+ {/* TODO: fix the radio group alignment */}
+ handleRadioButtons(event.target.value)}
+ className={classes.radioButtons}
+ />
+
+ Threshold
+
+ {/* TODO: fix styles and allow only monetary values */}
+
+ {/* TODO: how should we define the fiat code? */}
+ EUR
+
+ >
+ )
+}
+
+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 (
+ <>
+
+
Choose a requirement
+
+
+
+
+ {/* TODO: fix the radio group alignment */}
handleRadioButtons(event.target.value)}
+ options={requirementRadioButtonOptions}
+ value={requirementRadioGroupValue}
+ onChange={event => handleRequirementRadioButtons(event.target.value)}
+ className={classes.radioButtons}
+ />
+
+ {/* TODO: why there's a trigger type property two times? Here and on the prior step */}
+
Choose trigger type
+
+
+
+
+ {/* TODO: fix the radio group alignment */}
+ handleTypeRadioButtons(event.target.value)}
className={classes.radioButtons}
/>
>
)
}
-const NewTriggerWizard = ({ handleClose, save }) => {
+const Wizard = ({ 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]
+
+ return (
+ <>
+ {currentStep}
+
+
+
+
+
+ >
+ )
+}
+
+const NewTriggerWizard = ({ finish }) => {
const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null)
- // const [currentWizardStep, setCurrentWizardStep] = useState(
- //
- // )
const classes = useStyles()
@@ -90,10 +309,7 @@ const NewTriggerWizard = ({ handleClose, save }) => {
const helpPopperOpen = Boolean(helpPopperAnchorEl)
return (
-
-
+ <>
New Compliance Trigger
@@ -118,16 +334,13 @@ const NewTriggerWizard = ({ handleClose, save }) => {
-
+ >
)
}
diff --git a/new-lamassu-admin/src/pages/Triggers/Triggers.js b/new-lamassu-admin/src/pages/Triggers/Triggers.js
index b12014b1..89418fd9 100644
--- a/new-lamassu-admin/src/pages/Triggers/Triggers.js
+++ b/new-lamassu-admin/src/pages/Triggers/Triggers.js
@@ -1,11 +1,12 @@
import React, { useState } from 'react'
-import { makeStyles, Modal } from '@material-ui/core'
+import { makeStyles, Modal, Paper } from '@material-ui/core'
import Title from 'src/components/Title'
import { FeatureButton, Link } from 'src/components/buttons'
import { Table as EditableTable } from 'src/components/editableTable'
import { ReactComponent as ConfigureInverseIcon } from 'src/styling/icons/button/configure/white.svg'
import { ReactComponent as Configure } from 'src/styling/icons/button/configure/zodiac.svg'
+import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
import { NewTriggerWizard } from './NewTriggerWizard'
import { mainStyles } from './Triggers.styles'
@@ -29,6 +30,10 @@ const Triggers = () => {
}
const handleCloseWizard = () => {
+ handleFinishWizard()
+ }
+
+ const handleFinishWizard = () => {
setWizardModalOpen(false)
}
@@ -79,9 +84,12 @@ const Triggers = () => {
open={wizardModalOpen}
onClose={handleCloseWizard}
className={classes.modal}>
-
-
-
+
+
+
+
)}
>
diff --git a/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js b/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js
index 54b44097..3115111d 100644
--- a/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js
+++ b/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js
@@ -81,6 +81,14 @@ const mainStyles = {
popoverContent: {
width: 272,
padding: [[10, 15]]
+ },
+ radioGroupWrapper: {
+ marginBottom: 46
+ },
+ textInput: {
+ width: 96,
+ height: 40,
+ marginRight: 8
}
}