diff --git a/new-lamassu-admin/src/components/Popper.js b/new-lamassu-admin/src/components/Popper.js index 992253d9..5129a6bf 100644 --- a/new-lamassu-admin/src/components/Popper.js +++ b/new-lamassu-admin/src/components/Popper.js @@ -10,7 +10,7 @@ const Popover = ({ children, bgColor = white, arrowSize = 7, ...props }) => { const styles = { popover: { - zIndex: 1000, + zIndex: 3000, backgroundColor: bgColor, borderRadius: 4 }, diff --git a/new-lamassu-admin/src/components/wizard/Wizard.js b/new-lamassu-admin/src/components/wizard/Wizard.js new file mode 100644 index 00000000..3fd7f650 --- /dev/null +++ b/new-lamassu-admin/src/components/wizard/Wizard.js @@ -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 ( + <> +
{header}
+
+
+ {/* TODO: wizard steps icons are a little strange... */} +
+ {children.map((e, i) => { + const elementToRender = [] + + if (i < currentStepIndex) + elementToRender.push( + + ) + else if (i === currentStepIndex) + elementToRender.push( + + ) + else + elementToRender.push() + + if (i < currentStepIndex) + elementToRender.push( +
+ ) + else if (i < finalStepIndex) + elementToRender.push( +
+ ) + + return elementToRender + })} +
+ {currentStep} +
+ +
+
+
+ + ) +} + +export default Wizard diff --git a/new-lamassu-admin/src/components/wizard/Wizard.styles.js b/new-lamassu-admin/src/components/wizard/Wizard.styles.js new file mode 100644 index 00000000..b4847438 --- /dev/null +++ b/new-lamassu-admin/src/components/wizard/Wizard.styles.js @@ -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 } diff --git a/new-lamassu-admin/src/components/wizard/index.js b/new-lamassu-admin/src/components/wizard/index.js new file mode 100644 index 00000000..89e0e0f9 --- /dev/null +++ b/new-lamassu-admin/src/components/wizard/index.js @@ -0,0 +1,3 @@ +import Wizard from './Wizard' + +export { Wizard } diff --git a/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js b/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js index 1455c27e..0799d516 100644 --- a/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js +++ b/new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js @@ -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 ( -
-
-

In which type of transactions will it trigger?

-
- -
-
-
- handleRadioButtons(event.target.value)} - className={classnames( - classes.radioButtons, - classes.stepOneRadioButtons - )} - /> -
-
- ) -} - -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

-
- -
-
-
- handleRadioButtons(event.target.value)} - className={classnames( - classes.radioButtons, - classes.stepTwoRadioButtons - )} - /> -
-

Threshold

-
- {/* TODO: 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

-
- -
-
- handleRequirementRadioButtons(event.target.value)} - className={classnames( - classes.radioButtons, - classes.stepThreeRadioButtons - )} - /> -
- {/* TODO: why there's a trigger type property two times? Here and on the prior step */} -

Choose trigger type

-
- -
-
- handleTypeRadioButtons(event.target.value)} - className={classnames( - classes.radioButtons, - classes.stepThreeRadioButtons - )} - /> -
- ) -} - -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 ( -
- {/* TODO: wizard steps icons are a little strange... */} -
- {children.map((e, i) => { - const elementToRender = [] - - if (i < currentStepIndex) elementToRender.push() - else if (i === currentStepIndex) elementToRender.push() - else elementToRender.push() - - if (i < currentStepIndex) - elementToRender.push(
) - else if (i < finalStepIndex) - elementToRender.push(
) - - return elementToRender - })} -
- {currentStep} -
- -
-
- ) -} +` 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,42 +39,40 @@ const NewTriggerWizard = ({ finish }) => { const helpPopperOpen = Boolean(helpPopperAnchorEl) + const wizardHeader = ( +
+

New Compliance Trigger

+
+ +
+
+ ) + return ( - <> -
-
-

New Compliance Trigger

-
- -
-
-
-
- - - - - -
- + + + + + ) } diff --git a/new-lamassu-admin/src/pages/Triggers/SelectTriggerDirection.js b/new-lamassu-admin/src/pages/Triggers/SelectTriggerDirection.js new file mode 100644 index 00000000..7f1131b7 --- /dev/null +++ b/new-lamassu-admin/src/pages/Triggers/SelectTriggerDirection.js @@ -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 ( +
+
+

In which type of transactions will it trigger?

+
+ +
+
+
+ handleRadioButtons(event.target.value)} + className={classnames( + classes.radioButtons, + classes.stepOneRadioButtons + )} + /> +
+
+ ) +} +export default SelectTriggerDirection diff --git a/new-lamassu-admin/src/pages/Triggers/SelectTriggerRequirements.js b/new-lamassu-admin/src/pages/Triggers/SelectTriggerRequirements.js new file mode 100644 index 00000000..23e61d71 --- /dev/null +++ b/new-lamassu-admin/src/pages/Triggers/SelectTriggerRequirements.js @@ -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 ( +
+
+

Choose a requirement

+
+ +
+
+ handleRequirementRadioButtons(event.target.value)} + className={classnames( + classes.radioButtons, + classes.stepThreeRadioButtons + )} + /> +
+ {/* TODO: why there's a trigger type property two times? Here and on the prior step */} +

Choose trigger type

+
+ +
+
+ handleTypeRadioButtons(event.target.value)} + className={classnames( + classes.radioButtons, + classes.stepThreeRadioButtons + )} + /> +
+ ) +} + +export default SelectTriggerRequirements diff --git a/new-lamassu-admin/src/pages/Triggers/SelectTriggerType.js b/new-lamassu-admin/src/pages/Triggers/SelectTriggerType.js new file mode 100644 index 00000000..b2323471 --- /dev/null +++ b/new-lamassu-admin/src/pages/Triggers/SelectTriggerType.js @@ -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 ( +
+
+

Choose trigger type

+
+ +
+
+
+ handleRadioButtons(event.target.value)} + className={classnames( + classes.radioButtons, + classes.stepTwoRadioButtons + )} + /> +
+

Threshold

+
+ {/* TODO: allow only monetary values */} + + {fiatCurrencyCode} +
+
+ ) +} + +export default SelectTriggerType