chore: remove direction option from trigger page

This commit is contained in:
Taranto 2020-10-11 18:45:16 +01:00 committed by Josh Harvey
parent 3a6f3a2915
commit f7f5cba7c2
4 changed files with 151 additions and 136 deletions

View file

@ -50,7 +50,9 @@ const Triggers = () => {
}) })
const add = rawConfig => { const add = rawConfig => {
const toSave = R.concat([{ id: v4(), ...rawConfig }])(triggers) const toSave = R.concat([{ id: v4(), direction: 'both', ...rawConfig }])(
triggers
)
setError(false) setError(false)
return saveConfig({ variables: { config: { triggers: toServer(toSave) } } }) return saveConfig({ variables: { config: { triggers: toServer(toSave) } } })
} }
@ -73,9 +75,13 @@ const Triggers = () => {
return ( return (
<> <>
<TitleSection title="Compliance Triggers"> <TitleSection title="Compliance Triggers" className={classes.tableWidth}>
<Box display="flex" alignItems="center"> <Box display="flex" alignItems="center">
<Box display="flex" alignItems="center" justifyContent="end" mr={3}> <Box
display="flex"
alignItems="center"
justifyContent="end"
mr="-5px">
<P>Reject reused addresses</P> <P>Reject reused addresses</P>
<Switch <Switch
checked={rejectAddressReuse} checked={rejectAddressReuse}
@ -95,11 +101,17 @@ const Triggers = () => {
</P> </P>
</Tooltip> </Tooltip>
</Box> </Box>
<Link color="primary" onClick={() => setWizard(true)}>
+ Add new trigger
</Link>
</Box> </Box>
</TitleSection> </TitleSection>
<Box
marginBottom={2}
className={classes.tableWidth}
display="flex"
justifyContent="end">
<Link color="primary" onClick={() => setWizard(true)}>
+ Add new trigger
</Link>
</Box>
<EditableTable <EditableTable
data={triggers} data={triggers}
name="triggers" name="triggers"

View file

@ -9,5 +9,8 @@ export default {
}, },
tableRadioLabel: { tableRadioLabel: {
marginRight: 0 marginRight: 0
},
tableWidth: {
width: 918
} }
} }

View file

@ -10,9 +10,9 @@ import { Button } from 'src/components/buttons'
import { H5, Info3 } from 'src/components/typography' import { H5, Info3 } from 'src/components/typography'
import { comet } from 'src/styling/variables' import { comet } from 'src/styling/variables'
import { txDirection, type, requirements } from './helper' import { type, requirements } from './helper'
const LAST_STEP = 3 const LAST_STEP = 2
const styles = { const styles = {
stepper: { stepper: {
@ -43,11 +43,11 @@ const useStyles = makeStyles(styles)
const getStep = step => { const getStep = step => {
switch (step) { switch (step) {
// case 1:
// return txDirection
case 1: case 1:
return txDirection
case 2:
return type return type
case 3: case 2:
return requirements return requirements
default: default:
return Fragment return Fragment
@ -56,11 +56,11 @@ const getStep = step => {
const getText = (step, config, currency) => { const getText = (step, config, currency) => {
switch (step) { switch (step) {
// case 1:
// return `In ${getDirectionText(config)} transactions`
case 1: case 1:
return `In ${getDirectionText(config)} transactions` return `If the user ${getTypeText(config, currency)}`
case 2: case 2:
return `if the user ${getTypeText(config, currency)}`
case 3:
return `the user will be ${getRequirementText(config)}.` return `the user will be ${getRequirementText(config)}.`
default: default:
return '' return ''
@ -71,18 +71,18 @@ const orUnderline = value => {
return R.isEmpty(value) || R.isNil(value) ? '⎼⎼⎼⎼⎼ ' : value return R.isEmpty(value) || R.isNil(value) ? '⎼⎼⎼⎼⎼ ' : value
} }
const getDirectionText = config => { // const getDirectionText = config => {
switch (config.direction) { // switch (config.direction) {
case 'both': // case 'both':
return 'both cash-in and cash-out' // return 'both cash-in and cash-out'
case 'cashIn': // case 'cashIn':
return 'cash-in' // return 'cash-in'
case 'cashOut': // case 'cashOut':
return 'cash-out' // return 'cash-out'
default: // default:
return orUnderline(null) // return orUnderline(null)
} // }
} // }
const getTypeText = (config, currency) => { const getTypeText = (config, currency) => {
switch (config.triggerType) { switch (config.triggerType) {

View file

@ -7,8 +7,8 @@ import * as Yup from 'yup'
import { TextInput, RadioGroup } from 'src/components/inputs/formik' import { TextInput, RadioGroup } from 'src/components/inputs/formik'
import { H4, Label2, Label1, Info2 } from 'src/components/typography' import { H4, Label2, Label1, Info2 } from 'src/components/typography'
import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg' // import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg' // import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
import { errorColor } from 'src/styling/variables' import { errorColor } from 'src/styling/variables'
const useStyles = makeStyles({ const useStyles = makeStyles({
@ -68,7 +68,7 @@ const useStyles = makeStyles({
} }
}) })
const direction = Yup.string().required('Required') // const direction = Yup.string().required('Required')
const triggerType = Yup.string().required('Required') const triggerType = Yup.string().required('Required')
const threshold = Yup.object().shape({ const threshold = Yup.object().shape({
threshold: Yup.number(), threshold: Yup.number(),
@ -82,95 +82,95 @@ const requirement = Yup.object().shape({
const Schema = Yup.object().shape({ const Schema = Yup.object().shape({
triggerType, triggerType,
requirement, requirement,
threshold, threshold
direction // direction
}) })
// Direction // Direction V2 only
const directionSchema = Yup.object().shape({ direction }) // const directionSchema = Yup.object().shape({ direction })
const directionOptions = [ // const directionOptions = [
{ // {
display: 'Both', // display: 'Both',
code: 'both' // code: 'both'
}, // },
{ // {
display: 'Only cash-in', // display: 'Only cash-in',
code: 'cashIn' // code: 'cashIn'
}, // },
{ // {
display: 'Only cash-out', // display: 'Only cash-out',
code: 'cashOut' // code: 'cashOut'
} // }
] // ]
const directionOptions2 = [ // const directionOptions2 = [
{ // {
display: ( // display: (
<> // <>
<TxInIcon /> in // <TxInIcon /> in
</> // </>
), // ),
code: 'cashIn' // code: 'cashIn'
}, // },
{ // {
display: ( // display: (
<> // <>
<TxOutIcon /> out // <TxOutIcon /> out
</> // </>
), // ),
code: 'cashOut' // code: 'cashOut'
}, // },
{ // {
display: ( // display: (
<> // <>
<Box display="flex"> // <Box display="flex">
<Box mr={0.25}> // <Box mr={0.25}>
<TxOutIcon /> // <TxOutIcon />
</Box> // </Box>
<Box> // <Box>
<TxInIcon /> // <TxInIcon />
</Box> // </Box>
</Box> // </Box>
</> // </>
), // ),
code: 'both' // code: 'both'
} // }
] // ]
const Direction = () => { // const Direction = () => {
const classes = useStyles() // const classes = useStyles()
const { errors } = useFormikContext() // const { errors } = useFormikContext()
const titleClass = { // const titleClass = {
[classes.error]: errors.direction // [classes.error]: errors.direction
} // }
return ( // return (
<> // <>
<Box display="flex" alignItems="center"> // <Box display="flex" alignItems="center">
<H4 className={classnames(titleClass)}> // <H4 className={classnames(titleClass)}>
In which type of transactions will it trigger? // In which type of transactions will it trigger?
</H4> // </H4>
</Box> // </Box>
<Field // <Field
component={RadioGroup} // component={RadioGroup}
name="direction" // name="direction"
options={directionOptions} // options={directionOptions}
labelClassName={classes.radioLabel} // labelClassName={classes.radioLabel}
radioClassName={classes.radio} // radioClassName={classes.radio}
className={classes.radioGroup} // className={classes.radioGroup}
/> // />
</> // </>
) // )
} // }
const txDirection = { // const txDirection = {
schema: directionSchema, // schema: directionSchema,
options: directionOptions, // options: directionOptions,
Component: Direction, // Component: Direction,
initialValues: { direction: '' } // initialValues: { direction: '' }
} // }
// TYPE // TYPE
const typeSchema = Yup.object().shape({ const typeSchema = Yup.object().shape({
@ -317,20 +317,20 @@ const getView = (data, code, compare) => it => {
return R.compose(R.prop(code), R.find(R.propEq(compare ?? 'code', it)))(data) return R.compose(R.prop(code), R.find(R.propEq(compare ?? 'code', it)))(data)
} }
const DirectionDisplay = ({ code }) => { // const DirectionDisplay = ({ code }) => {
const classes = useStyles() // const classes = useStyles()
const displayName = getView(directionOptions, 'display')(code) // const displayName = getView(directionOptions, 'display')(code)
const showCashIn = code === 'cashIn' || code === 'both' // const showCashIn = code === 'cashIn' || code === 'both'
const showCashOut = code === 'cashOut' || code === 'both' // const showCashOut = code === 'cashOut' || code === 'both'
return ( // return (
<div> // <div>
{showCashOut && <TxOutIcon className={classes.directionIcon} />} // {showCashOut && <TxOutIcon className={classes.directionIcon} />}
{showCashIn && <TxInIcon className={classes.directionIcon} />} // {showCashIn && <TxInIcon className={classes.directionIcon} />}
<span className={classes.directionName}>{displayName}</span> // <span className={classes.directionName}>{displayName}</span>
</div> // </div>
) // )
} // }
const RequirementInput = () => { const RequirementInput = () => {
const { values } = useFormikContext() const { values } = useFormikContext()
@ -505,19 +505,19 @@ const getElements = (currency, classes) => [
textAlign: 'right', textAlign: 'right',
input: () => <ThresholdInput currency={currency} />, input: () => <ThresholdInput currency={currency} />,
view: (it, config) => <ThresholdView config={config} currency={currency} /> view: (it, config) => <ThresholdView config={config} currency={currency} />
},
{
name: 'direction',
size: 'sm',
width: 282,
view: it => <DirectionDisplay code={it} />,
input: RadioGroup,
inputProps: {
labelClassName: classes.tableRadioLabel,
className: classes.tableRadioGroup,
options: directionOptions2
}
} }
// {
// name: 'direction',
// size: 'sm',
// width: 282,
// view: it => <DirectionDisplay code={it} />,
// input: RadioGroup,
// inputProps: {
// labelClassName: classes.tableRadioLabel,
// className: classes.tableRadioGroup,
// options: directionOptions2
// }
// }
] ]
const triggerOrder = R.map(R.prop('code'))(typeOptions) const triggerOrder = R.map(R.prop('code'))(typeOptions)
@ -555,7 +555,7 @@ const toServer = triggers =>
export { export {
Schema, Schema,
getElements, getElements,
txDirection, // txDirection,
type, type,
requirements, requirements,
sortBy, sortBy,