From f7f5cba7c27e3d921c24eb9c183382795439b7a1 Mon Sep 17 00:00:00 2001
From: Taranto <rafael.taranto@protonmail.com>
Date: Sun, 11 Oct 2020 18:45:16 +0100
Subject: [PATCH] chore: remove direction option from trigger page

---
 .../src/pages/Triggers/Triggers.js            |  24 +-
 .../src/pages/Triggers/Triggers.styles.js     |   3 +
 .../src/pages/Triggers/Wizard.js              |  40 ++--
 .../src/pages/Triggers/helper.js              | 220 +++++++++---------
 4 files changed, 151 insertions(+), 136 deletions(-)

diff --git a/new-lamassu-admin/src/pages/Triggers/Triggers.js b/new-lamassu-admin/src/pages/Triggers/Triggers.js
index 018401c8..a8b8fa6f 100644
--- a/new-lamassu-admin/src/pages/Triggers/Triggers.js
+++ b/new-lamassu-admin/src/pages/Triggers/Triggers.js
@@ -50,7 +50,9 @@ const Triggers = () => {
   })
 
   const add = rawConfig => {
-    const toSave = R.concat([{ id: v4(), ...rawConfig }])(triggers)
+    const toSave = R.concat([{ id: v4(), direction: 'both', ...rawConfig }])(
+      triggers
+    )
     setError(false)
     return saveConfig({ variables: { config: { triggers: toServer(toSave) } } })
   }
@@ -73,9 +75,13 @@ const Triggers = () => {
 
   return (
     <>
-      <TitleSection title="Compliance Triggers">
+      <TitleSection title="Compliance Triggers" className={classes.tableWidth}>
         <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>
             <Switch
               checked={rejectAddressReuse}
@@ -95,11 +101,17 @@ const Triggers = () => {
               </P>
             </Tooltip>
           </Box>
-          <Link color="primary" onClick={() => setWizard(true)}>
-            + Add new trigger
-          </Link>
         </Box>
       </TitleSection>
+      <Box
+        marginBottom={2}
+        className={classes.tableWidth}
+        display="flex"
+        justifyContent="end">
+        <Link color="primary" onClick={() => setWizard(true)}>
+          + Add new trigger
+        </Link>
+      </Box>
       <EditableTable
         data={triggers}
         name="triggers"
diff --git a/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js b/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js
index e532b514..ad2be31d 100644
--- a/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js
+++ b/new-lamassu-admin/src/pages/Triggers/Triggers.styles.js
@@ -9,5 +9,8 @@ export default {
   },
   tableRadioLabel: {
     marginRight: 0
+  },
+  tableWidth: {
+    width: 918
   }
 }
diff --git a/new-lamassu-admin/src/pages/Triggers/Wizard.js b/new-lamassu-admin/src/pages/Triggers/Wizard.js
index 8af9b4d3..399c798f 100644
--- a/new-lamassu-admin/src/pages/Triggers/Wizard.js
+++ b/new-lamassu-admin/src/pages/Triggers/Wizard.js
@@ -10,9 +10,9 @@ import { Button } from 'src/components/buttons'
 import { H5, Info3 } from 'src/components/typography'
 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 = {
   stepper: {
@@ -43,11 +43,11 @@ const useStyles = makeStyles(styles)
 
 const getStep = step => {
   switch (step) {
+    // case 1:
+    //   return txDirection
     case 1:
-      return txDirection
-    case 2:
       return type
-    case 3:
+    case 2:
       return requirements
     default:
       return Fragment
@@ -56,11 +56,11 @@ const getStep = step => {
 
 const getText = (step, config, currency) => {
   switch (step) {
+    // case 1:
+    //   return `In ${getDirectionText(config)} transactions`
     case 1:
-      return `In ${getDirectionText(config)} transactions`
+      return `If the user ${getTypeText(config, currency)}`
     case 2:
-      return `if the user ${getTypeText(config, currency)}`
-    case 3:
       return `the user will be ${getRequirementText(config)}.`
     default:
       return ''
@@ -71,18 +71,18 @@ const orUnderline = value => {
   return R.isEmpty(value) || R.isNil(value) ? '⎼⎼⎼⎼⎼ ' : value
 }
 
-const getDirectionText = config => {
-  switch (config.direction) {
-    case 'both':
-      return 'both cash-in and cash-out'
-    case 'cashIn':
-      return 'cash-in'
-    case 'cashOut':
-      return 'cash-out'
-    default:
-      return orUnderline(null)
-  }
-}
+// const getDirectionText = config => {
+//   switch (config.direction) {
+//     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) {
diff --git a/new-lamassu-admin/src/pages/Triggers/helper.js b/new-lamassu-admin/src/pages/Triggers/helper.js
index c0544dfb..eb77d15d 100644
--- a/new-lamassu-admin/src/pages/Triggers/helper.js
+++ b/new-lamassu-admin/src/pages/Triggers/helper.js
@@ -7,8 +7,8 @@ import * as Yup from 'yup'
 
 import { TextInput, RadioGroup } from 'src/components/inputs/formik'
 import { H4, Label2, Label1, Info2 } 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 { 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({
@@ -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 threshold = Yup.object().shape({
   threshold: Yup.number(),
@@ -82,95 +82,95 @@ const requirement = Yup.object().shape({
 const Schema = Yup.object().shape({
   triggerType,
   requirement,
-  threshold,
-  direction
+  threshold
+  // direction
 })
 
-// Direction
-const directionSchema = Yup.object().shape({ direction })
+// Direction V2 only
+// const directionSchema = Yup.object().shape({ direction })
 
-const directionOptions = [
-  {
-    display: 'Both',
-    code: 'both'
-  },
-  {
-    display: 'Only cash-in',
-    code: 'cashIn'
-  },
-  {
-    display: 'Only cash-out',
-    code: 'cashOut'
-  }
-]
+// const directionOptions = [
+//   {
+//     display: 'Both',
+//     code: 'both'
+//   },
+//   {
+//     display: 'Only cash-in',
+//     code: 'cashIn'
+//   },
+//   {
+//     display: 'Only cash-out',
+//     code: 'cashOut'
+//   }
+// ]
 
-const directionOptions2 = [
-  {
-    display: (
-      <>
-        <TxInIcon /> in
-      </>
-    ),
-    code: 'cashIn'
-  },
-  {
-    display: (
-      <>
-        <TxOutIcon /> out
-      </>
-    ),
-    code: 'cashOut'
-  },
-  {
-    display: (
-      <>
-        <Box display="flex">
-          <Box mr={0.25}>
-            <TxOutIcon />
-          </Box>
-          <Box>
-            <TxInIcon />
-          </Box>
-        </Box>
-      </>
-    ),
-    code: 'both'
-  }
-]
+// const directionOptions2 = [
+//   {
+//     display: (
+//       <>
+//         <TxInIcon /> in
+//       </>
+//     ),
+//     code: 'cashIn'
+//   },
+//   {
+//     display: (
+//       <>
+//         <TxOutIcon /> out
+//       </>
+//     ),
+//     code: 'cashOut'
+//   },
+//   {
+//     display: (
+//       <>
+//         <Box display="flex">
+//           <Box mr={0.25}>
+//             <TxOutIcon />
+//           </Box>
+//           <Box>
+//             <TxInIcon />
+//           </Box>
+//         </Box>
+//       </>
+//     ),
+//     code: 'both'
+//   }
+// ]
 
-const Direction = () => {
-  const classes = useStyles()
-  const { errors } = useFormikContext()
+// const Direction = () => {
+//   const classes = useStyles()
+//   const { errors } = useFormikContext()
 
-  const titleClass = {
-    [classes.error]: errors.direction
-  }
+//   const titleClass = {
+//     [classes.error]: errors.direction
+//   }
 
-  return (
-    <>
-      <Box display="flex" alignItems="center">
-        <H4 className={classnames(titleClass)}>
-          In which type of transactions will it trigger?
-        </H4>
-      </Box>
-      <Field
-        component={RadioGroup}
-        name="direction"
-        options={directionOptions}
-        labelClassName={classes.radioLabel}
-        radioClassName={classes.radio}
-        className={classes.radioGroup}
-      />
-    </>
-  )
-}
+//   return (
+//     <>
+//       <Box display="flex" alignItems="center">
+//         <H4 className={classnames(titleClass)}>
+//           In which type of transactions will it trigger?
+//         </H4>
+//       </Box>
+//       <Field
+//         component={RadioGroup}
+//         name="direction"
+//         options={directionOptions}
+//         labelClassName={classes.radioLabel}
+//         radioClassName={classes.radio}
+//         className={classes.radioGroup}
+//       />
+//     </>
+//   )
+// }
 
-const txDirection = {
-  schema: directionSchema,
-  options: directionOptions,
-  Component: Direction,
-  initialValues: { direction: '' }
-}
+// const txDirection = {
+//   schema: directionSchema,
+//   options: directionOptions,
+//   Component: Direction,
+//   initialValues: { direction: '' }
+// }
 
 // TYPE
 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)
 }
 
-const DirectionDisplay = ({ code }) => {
-  const classes = useStyles()
-  const displayName = getView(directionOptions, 'display')(code)
-  const showCashIn = code === 'cashIn' || code === 'both'
-  const showCashOut = code === 'cashOut' || code === 'both'
+// 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 (
-    <div>
-      {showCashOut && <TxOutIcon className={classes.directionIcon} />}
-      {showCashIn && <TxInIcon className={classes.directionIcon} />}
-      <span className={classes.directionName}>{displayName}</span>
-    </div>
-  )
-}
+//   return (
+//     <div>
+//       {showCashOut && <TxOutIcon className={classes.directionIcon} />}
+//       {showCashIn && <TxInIcon className={classes.directionIcon} />}
+//       <span className={classes.directionName}>{displayName}</span>
+//     </div>
+//   )
+// }
 
 const RequirementInput = () => {
   const { values } = useFormikContext()
@@ -505,19 +505,19 @@ const getElements = (currency, classes) => [
     textAlign: 'right',
     input: () => <ThresholdInput 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)
@@ -555,7 +555,7 @@ const toServer = triggers =>
 export {
   Schema,
   getElements,
-  txDirection,
+  // txDirection,
   type,
   requirements,
   sortBy,