setWizard(null)}
+ />
)}
)
diff --git a/new-lamassu-admin/src/pages/Triggers/Wizard.js b/new-lamassu-admin/src/pages/Triggers/Wizard.js
index ff76c550..48bf83ec 100644
--- a/new-lamassu-admin/src/pages/Triggers/Wizard.js
+++ b/new-lamassu-admin/src/pages/Triggers/Wizard.js
@@ -1,12 +1,14 @@
import { makeStyles } from '@material-ui/core'
-import { Form, Formik } from 'formik'
+import { Form, Formik, useFormikContext } from 'formik'
import * as R from 'ramda'
-import React, { useState, Fragment } from 'react'
+import React, { useState, Fragment, useEffect } from 'react'
import ErrorMessage from 'src/components/ErrorMessage'
import Modal from 'src/components/Modal'
import Stepper from 'src/components/Stepper'
import { Button } from 'src/components/buttons'
+import { H5, Info3 } from 'src/components/typography'
+import { comet } from 'src/styling/variables'
import { direction, type, requirements } from './helper'
@@ -28,6 +30,12 @@ const styles = {
height: '100%',
display: 'flex',
flexDirection: 'column'
+ },
+ infoTitle: {
+ margin: [[18, 0, 20, 0]]
+ },
+ infoCurrentText: {
+ color: comet
}
}
@@ -46,9 +54,118 @@ const getStep = step => {
}
}
-const Wizard = ({ machine, onClose, save, error }) => {
+const getText = (step, config, currency) => {
+ switch (step) {
+ case 1:
+ return `In ${getDirectionText(config)} transactions`
+ case 2:
+ return `if the user ${getTypeText(config, currency)}`
+ case 3:
+ return `the user will be ${getRequirementText(config)}.`
+ default:
+ return ''
+ }
+}
+
+const orUnderline = value => {
+ return R.isEmpty(value) || R.isNil(value) ? '⎼⎼⎼⎼⎼ ' : value
+}
+
+const getDirectionText = config => {
+ switch (config.cashDirection) {
+ case 'both':
+ return 'both cash-in and cash-out'
+ case 'cashIn':
+ return 'cash-in'
+ case 'cashOut':
+ return 'cash-out'
+ default:
+ return orUnderline(null)
+ }
+}
+
+const getTypeText = (config, currency) => {
+ switch (config.triggerType) {
+ case 'txAmount':
+ return `makes a single transaction over ${orUnderline(
+ config.threshold
+ )} ${currency}`
+ case 'txVolume':
+ return `makes transactions over ${orUnderline(
+ config.threshold
+ )} ${currency} in ${orUnderline(config.days)} days`
+ case 'txVelocity':
+ return `makes ${orUnderline(
+ config.threshold
+ )} transactions in ${orUnderline(config.days)} days`
+ case 'consecutiveDays':
+ return `at least one transaction every day for ${orUnderline(
+ config.days
+ )} days`
+ default:
+ return ''
+ }
+}
+
+const getRequirementText = config => {
+ switch (config.requirement) {
+ case 'sms':
+ return 'asked to enter code provided through SMS verification'
+ case 'idPhoto':
+ return 'asked to scan a ID with photo'
+ case 'idData':
+ return 'asked to scan a ID'
+ case 'facephoto':
+ return 'asked to have a photo taken'
+ case 'sanctions':
+ return 'matched against the OFAC sanctions list'
+ case 'superuser':
+ return ''
+ case 'suspend':
+ return 'suspended'
+ case 'block':
+ return 'blocked'
+ default:
+ return orUnderline(null)
+ }
+}
+
+const InfoPanel = ({ step, config = {}, liveValues = {}, currency }) => {
const classes = useStyles()
+ const oldText = R.range(1, step)
+ .map(it => getText(it, config, currency))
+ .join(', ')
+ const newText = getText(step, liveValues, currency)
+ const isLastStep = step === LAST_STEP
+
+ return (
+ <>
+ Trigger overview so far
+
+ {oldText}
+ {step !== 1 && ', '}
+ {newText}
+ {!isLastStep && '...'}
+
+
+ )
+}
+
+const GetValues = ({ setValues }) => {
+ const { values } = useFormikContext()
+ useEffect(() => {
+ console.log('triggered')
+ setValues && values && setValues(values)
+ }, [setValues, values])
+
+ return null
+}
+
+const Wizard = ({ onClose, save, error, currency }) => {
+ const classes = useStyles()
+
+ const [liveValues, setLiveValues] = useState({})
const [{ step, config }, setState] = useState({
step: 1
})
@@ -70,33 +187,45 @@ const Wizard = ({ machine, onClose, save, error }) => {
}
return (
-
-
-
-
-
-
+ <>
+
+ }
+ infoPanelHeight={172}
+ open={true}>
+
+
+
+
+
+
)
}
diff --git a/new-lamassu-admin/src/pages/Triggers/helper.js b/new-lamassu-admin/src/pages/Triggers/helper.js
index bebc7dc4..b0957119 100644
--- a/new-lamassu-admin/src/pages/Triggers/helper.js
+++ b/new-lamassu-admin/src/pages/Triggers/helper.js
@@ -8,6 +8,8 @@ import * as Yup from 'yup'
import { TextInput, RadioGroup } from 'src/components/inputs/formik'
import Autocomplete from 'src/components/inputs/formik/Autocomplete'
import { H4 } from 'src/components/typography'
+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 { errorColor } from 'src/styling/variables'
const useStyles = makeStyles({
@@ -32,6 +34,12 @@ const useStyles = makeStyles({
specialGrid: {
display: 'grid',
gridTemplateColumns: [[182, 162, 141]]
+ },
+ directionIcon: {
+ marginRight: 2
+ },
+ directionName: {
+ marginLeft: 6
}
})
@@ -98,8 +106,8 @@ const typeSchema = Yup.object().shape({
const typeOptions = [
{ display: 'Transaction amount', code: 'txAmount' },
- { display: 'Transaction velocity', code: 'txVelocity' },
{ display: 'Transaction volume', code: 'txVolume' },
+ { display: 'Transaction velocity', code: 'txVelocity' },
{ display: 'Consecutive days', code: 'consecutiveDays' }
]
@@ -131,9 +139,6 @@ const Type = () => {
size="lg"
name="threshold"
options={typeOptions}
- labelClassName={classes.radioLabel}
- radioClassName={classes.radio}
- className={classes.radioGroup}
/>
)
@@ -199,12 +204,29 @@ const getView = (data, code, compare) => it => {
return R.compose(R.prop(code), R.find(R.propEq(compare ?? 'code', it)))(data)
}
+const DirectionDisplay = ({ code }) => {
+ const classes = useStyles()
+ const displayName = getView(directionOptions, 'display')(code)
+ const showCashIn = code === 'cashIn' || code === 'both'
+ const showCashOut = code === 'cashOut' || code === 'both'
+
+ return (
+
+ {showCashOut && }
+ {showCashIn && }
+ {displayName}
+
+ )
+}
+
const elements = [
{
name: 'triggerType',
size: 'sm',
- width: 271,
- input: Autocomplete,
+ width: 230,
+ input: ({ field: { value: name } }) => (
+ <>{getView(typeOptions, 'display')(name)}
+ ),
view: getView(typeOptions, 'display'),
inputProps: {
options: typeOptions,
@@ -216,8 +238,10 @@ const elements = [
{
name: 'requirement',
size: 'sm',
- width: 271,
- input: Autocomplete,
+ width: 230,
+ input: ({ field: { value: name } }) => (
+ <>{getView(requirementOptions, 'display')(name)}
+ ),
view: getView(requirementOptions, 'display'),
inputProps: {
options: requirementOptions,
@@ -229,14 +253,15 @@ const elements = [
{
name: 'threshold',
size: 'sm',
- width: 271,
+ width: 260,
+ textAlign: 'right',
input: TextInput
},
{
name: 'cashDirection',
size: 'sm',
- width: 200,
- view: getView(directionOptions, 'display'),
+ width: 282,
+ view: it => ,
input: Autocomplete,
inputProps: {
options: directionOptions,
@@ -247,4 +272,12 @@ const elements = [
}
]
-export { Schema, elements, direction, type, requirements }
+const triggerOrder = R.map(R.prop('code'))(typeOptions)
+const sortBy = [
+ R.comparator(
+ (a, b) =>
+ triggerOrder.indexOf(a.triggerType) < triggerOrder.indexOf(b.triggerType)
+ )
+]
+
+export { Schema, elements, direction, type, requirements, sortBy }
diff --git a/new-lamassu-admin/src/styling/variables.js b/new-lamassu-admin/src/styling/variables.js
index 4446657f..fecc40d8 100644
--- a/new-lamassu-admin/src/styling/variables.js
+++ b/new-lamassu-admin/src/styling/variables.js
@@ -63,11 +63,11 @@ const fontPrimary = 'Mont'
const fontSecondary = 'MuseoSans'
const fontMonospaced = 'BPmono'
-let fontSize1 = 24
-let fontSize2 = 20
-let fontSize3 = 16
-let fontSize4 = 14
-let fontSize5 = 12
+let fontSize1 = 25
+let fontSize2 = 21
+let fontSize3 = 17
+let fontSize4 = 15
+let fontSize5 = 13
if (version === 8) {
fontSize1 = 32
diff --git a/new-lamassu-admin/todo.md b/new-lamassu-admin/todo.md
index fbf11b51..00f7e93a 100644
--- a/new-lamassu-admin/todo.md
+++ b/new-lamassu-admin/todo.md
@@ -5,7 +5,6 @@ Overall:
- validation is bad rn, negatives being allowed
- locale based mil separators 1.000 1,000
- Table should be loaded on slow internet (we want to load the table with no data)
- - font sizes could be better
- tooltip like components should close on esc
- saving should be a one time thing. disable buttons so user doesnt spam it
- disable edit on non-everrides => overrides
@@ -21,9 +20,6 @@ Locale:
Notifications:
- one of the crypto balance alerts has to be optional because of migration
-Machine status:
- - font-size of the 'write to confirm'
-
Server:
- Takes too long to load. Investigate
@@ -47,3 +43,7 @@ Compliance:
Ideas
- Transactions could have a link to the customer
- Transactions table on customer should have a link to "transactions"
+
+
+Feedback needed
+ - font sizes could be better (I've bumped all font sizes by 1px, looks pretty good as fonts do a good vertical bump in size. Maybe some of the fonts don't like even values)
\ No newline at end of file