fix: get triggers up to spec

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 (
+    <>
+      <H5 className={classes.infoTitle}>Trigger overview so far</H5>
+      <Info3 noMargin>
+        {oldText}
+        {step !== 1 && ', '}
+        <span className={classes.infoCurrentText}>{newText}</span>
+        {!isLastStep && '...'}
+      </Info3>
+    </>
+  )
+}
+
+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 (
-    <Modal
-      title="New compliance trigger"
-      handleClose={onClose}
-      width={520}
-      height={480}
-      open={true}>
-      <Stepper
-        className={classes.stepper}
-        steps={LAST_STEP}
-        currentStep={step}
-      />
-      <Formik
-        enableReinitialize
-        onSubmit={onContinue}
-        initialValues={stepOptions.initialValues}
-        validationSchema={stepOptions.schema}>
-        <Form className={classes.form}>
-          <stepOptions.Component />
-          <div className={classes.submit}>
-            {error && <ErrorMessage>Failed to save</ErrorMessage>}
-            <Button className={classes.button} type="submit">
-              {isLastStep ? 'Finish' : 'Next'}
-            </Button>
-          </div>
-        </Form>
-      </Formik>
-    </Modal>
+    <>
+      <Modal
+        title="New compliance trigger"
+        handleClose={onClose}
+        width={520}
+        height={480}
+        infoPanel={
+          <InfoPanel
+            currency={currency}
+            step={step}
+            config={config}
+            liveValues={liveValues}
+          />
+        }
+        infoPanelHeight={172}
+        open={true}>
+        <Stepper
+          className={classes.stepper}
+          steps={LAST_STEP}
+          currentStep={step}
+        />
+        <Formik
+          enableReinitialize
+          onSubmit={onContinue}
+          initialValues={stepOptions.initialValues}
+          validationSchema={stepOptions.schema}>
+          <Form onChange={console.log} className={classes.form}>
+            <GetValues setValues={setLiveValues} />
+            <stepOptions.Component />
+            <div className={classes.submit}>
+              {error && <ErrorMessage>Failed to save</ErrorMessage>}
+              <Button className={classes.button} type="submit">
+                {isLastStep ? 'Finish' : 'Next'}
+              </Button>
+            </div>
+          </Form>
+        </Formik>
+      </Modal>
+    </>
   )
 }