feat: created wizard's first step (select trigger direction)

new-lamassu-admin/src/pages/Triggers/NewTriggerWizard.js

@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
 import { makeStyles, Paper } from '@material-ui/core'
 
-import { H2, P } from 'src/components/typography'
+import { H2, H4, P } from 'src/components/typography'
-// import { Button } from 'src/components/buttons'
+import { RadioGroup } from 'src/components/inputs'
+import { Button } from 'src/components/buttons'
 import Popper from 'src/components/Popper'
 import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
 import { ReactComponent as HelpIcon } from 'src/styling/icons/action/help/zodiac.svg'
@@ -11,24 +12,82 @@ import { mainStyles } from './Triggers.styles'
 
 const useStyles = makeStyles(mainStyles)
 
-const NewTriggerWizard = ({ handleClose, save }) => {
+const SelectTriggerDirection = () => {
-  const [mainHelpPopperAnchorEl, setMainHelpPopperAnchorEl] = useState(null)
+  const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null)
+  const [radioGroupValue, setRadioGroupValue] = useState('both')
 
   const classes = useStyles()
 
-  const handleOpenMainHelpPopper = event => {
+  const handleOpenHelpPopper = event => {
-    setMainHelpPopperAnchorEl(
+    setHelpPopperAnchorEl(event.currentTarget)
-      mainHelpPopperAnchorEl ? null : event.currentTarget
-    )
   }
 
-  const handleCloseMainHelpPopper = () => {
+  const handleCloseHelpPopper = () => {
-    setMainHelpPopperAnchorEl(null)
+    setHelpPopperAnchorEl(null)
   }
 
-  const mainHelpPopperOpen = Boolean(mainHelpPopperAnchorEl)
+  const handleRadioButtons = newValue => {
+    setRadioGroupValue(newValue)
+  }
 
-  console.log(mainHelpPopperOpen)
+  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 (
+    <>
+      <div className={classes.rowWrapper}>
+        <H4>In which type of transactions will it trigger?</H4>
+        <div className={classes.transparentButton}>
+          <button onClick={handleOpenHelpPopper}>
+            <HelpIcon />
+            <Popper
+              open={helpPopperOpen}
+              anchorEl={helpPopperAnchorEl}
+              placement="bottom"
+              onClose={handleCloseHelpPopper}>
+              <div className={classes.popoverContent}>
+                <P>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
+                  tempor velit a dolor ultricies posuere. Proin massa sapien,
+                  euismod quis auctor vel, blandit in enim.
+                </P>
+              </div>
+            </Popper>
+          </button>
+        </div>
+      </div>
+      <RadioGroup
+        options={radioButtonOptions}
+        value={radioGroupValue}
+        onChange={event => handleRadioButtons(event.target.value)}
+        className={classes.radioButtons}
+      />
+    </>
+  )
+}
+
+const NewTriggerWizard = ({ handleClose, save }) => {
+  const [helpPopperAnchorEl, setHelpPopperAnchorEl] = useState(null)
+  // const [currentWizardStep, setCurrentWizardStep] = useState(
+  //   <SelectTriggerDirection />
+  // )
+
+  const classes = useStyles()
+
+  const handleOpenHelpPopper = event => {
+    setHelpPopperAnchorEl(event.currentTarget)
+  }
+
+  const handleCloseHelpPopper = () => {
+    setHelpPopperAnchorEl(null)
+  }
+
+  const helpPopperOpen = Boolean(helpPopperAnchorEl)
 
   return (
     <Paper className={classes.paper}>
@@ -39,13 +98,13 @@ const NewTriggerWizard = ({ handleClose, save }) => {
         <div className={classes.rowWrapper}>
           <H2>New Compliance Trigger</H2>
           <div className={classes.transparentButton}>
-            <button onClick={handleOpenMainHelpPopper}>
+            <button onClick={handleOpenHelpPopper}>
               <HelpIcon />
               <Popper
-                open={mainHelpPopperOpen}
+                open={helpPopperOpen}
-                anchorEl={mainHelpPopperAnchorEl}
+                anchorEl={helpPopperAnchorEl}
                 placement="bottom"
-                onClose={handleCloseMainHelpPopper}>
+                onClose={handleCloseHelpPopper}>
                 <div className={classes.popoverContent}>
                   <P>
                     Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -58,7 +117,16 @@ const NewTriggerWizard = ({ handleClose, save }) => {
           </div>
         </div>
       </div>
-      <div className={classes.modalBody}></div>
+      <div className={classes.modalBody}>
+        <div className={classes.topLeftAligned}>
+          <SelectTriggerDirection />
+        </div>
+        <div className={classes.bottomRightAligned}>
+          <div className={classes.button}>
+            <Button>Next</Button>
+          </div>
+        </div>
+      </div>
     </Paper>
   )
 }

new-lamassu-admin/src/pages/Triggers/Triggers.styles.js

@@ -1,14 +1,32 @@
 import baseStyles from 'src/pages/Logs.styles'
 import { booleanPropertiesTableStyles } from 'src/components/booleanPropertiesTable/BooleanPropertiesTable.styles'
 
-const { titleWrapper, titleAndButtonsContainer, buttonsWrapper } = baseStyles
+const {
-const { rowWrapper } = booleanPropertiesTableStyles
+  titleWrapper,
+  titleAndButtonsContainer,
+  buttonsWrapper,
+  button
+} = baseStyles
+const { rowWrapper, radioButtons } = booleanPropertiesTableStyles
 
 const mainStyles = {
   titleWrapper,
   titleAndButtonsContainer,
   buttonsWrapper,
+  button,
   rowWrapper,
+  radioButtons,
+  columnWrapper: {
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  topLeftAligned: {
+    alignSelf: 'flex-start'
+  },
+  bottomRightAligned: {
+    alignSelf: 'flex-end',
+    marginLeft: 'auto'
+  },
   modal: {
     display: 'flex',
     alignItems: 'center',