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 } }