feat: added the new trigger wizard modal

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

@@ -0,0 +1,28 @@
+import React from 'react'
+import { makeStyles, Paper } from '@material-ui/core'
+
+import { H2 } from 'src/components/typography'
+// import { Button } from 'src/components/buttons'
+import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
+
+import { mainStyles } from './Triggers.styles'
+
+const useStyles = makeStyles(mainStyles)
+
+const NewTriggerWizard = ({ handleClose, save }) => {
+  const classes = useStyles()
+
+  return (
+    <Paper className={classes.paper}>
+      <button onClick={handleClose}>
+        <CloseIcon />
+      </button>
+      <div className={classes.modalHeader}>
+        <H2>New Compliance Trigger</H2>
+      </div>
+      <div className={classes.modalBody}></div>
+    </Paper>
+  )
+}
+
+export { NewTriggerWizard }

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

@@ -1,13 +1,13 @@
-import { makeStyles } from '@material-ui/core/styles'
+import React, { useState } from 'react'
-import React from 'react'
+import { makeStyles, Modal } from '@material-ui/core'
 
 import Title from 'src/components/Title'
 import { FeatureButton, Link } from 'src/components/buttons'
 import { Table as EditableTable } from 'src/components/editableTable'
 import { ReactComponent as ConfigureInverseIcon } from 'src/styling/icons/button/configure/white.svg'
 import { ReactComponent as Configure } from 'src/styling/icons/button/configure/zodiac.svg'
-// import { ReactComponent as Help } from 'src/styling/icons/action/help/white.svg'
 
+import { NewTriggerWizard } from './NewTriggerWizard'
 import { mainStyles } from './Triggers.styles'
 
 const useStyles = makeStyles(mainStyles)
@@ -20,8 +20,18 @@ const sizes = {
 }
 
 const Triggers = () => {
+  const [wizardModalOpen, setWizardModalOpen] = useState(false)
+
   const classes = useStyles()
 
+  const handleOpenWizard = () => {
+    setWizardModalOpen(true)
+  }
+
+  const handleCloseWizard = () => {
+    setWizardModalOpen(false)
+  }
+
   return (
     <>
       <div className={classes.titleWrapper}>
@@ -32,49 +42,48 @@ const Triggers = () => {
               Icon={Configure}
               InverseIcon={ConfigureInverseIcon}
               variant="contained"
-              // onClick={handleAdvanced}
             />
           </div>
         </div>
         <div className={classes.headerLabels}>
-          <Link color="primary">+ Add new trigger</Link>
+          <Link color="primary" onClick={handleOpenWizard}>
+            + Add new trigger
+          </Link>
         </div>
       </div>
       <EditableTable
-        // save={save}
-        // validationSchema={validationSchema}
         data={[]}
         elements={[
           {
             name: 'triggerType',
             size: sizes.triggerType
-            // view: R.path(['display']),
-            // input: Autocomplete,
-            // inputProps: { suggestions: getData(['countries']) }
           },
           {
             name: 'requirement',
             size: sizes.requirement
-            // view: R.path(['code']),
-            // input: Autocomplete,
-            // inputProps: { suggestions: getData(['currencies']) }
           },
           {
             name: 'threshold',
             size: sizes.threshold
-            // view: displayCodeArray,
-            // input: AutocompleteMultiple,
-            // inputProps: { suggestions: getData(['languages']) }
           },
           {
             name: 'cashDirection',
             size: sizes.cashDirection
-            // view: displayCodeArray,
-            // input: AutocompleteMultiple,
-            // inputProps: { suggestions: getData(['cryptoCurrencies']) }
           }
         ]}
       />
+      {wizardModalOpen && (
+        <Modal
+          aria-labelledby="simple-modal-title"
+          aria-describedby="simple-modal-description"
+          open={wizardModalOpen}
+          onClose={handleCloseWizard}
+          className={classes.modal}>
+          <div>
+            <NewTriggerWizard handleClose={handleCloseWizard} />
+          </div>
+        </Modal>
+      )}
     </>
   )
 }

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

@@ -5,7 +5,48 @@ const { titleWrapper, titleAndButtonsContainer, buttonsWrapper } = baseStyles
 const mainStyles = {
   titleWrapper,
   titleAndButtonsContainer,
-  buttonsWrapper
+  buttonsWrapper,
+  modal: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    '& > div': {
+      outline: 'none'
+    }
+  },
+  paper: {
+    padding: [[5, 20, 32, 24]],
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    width: 520,
+    height: 480,
+    overflow: 'hidden',
+    '& > button': {
+      position: 'absolute',
+      top: 16,
+      right: 16,
+      border: 'none',
+      backgroundColor: 'transparent',
+      cursor: 'pointer',
+      '& svg': {
+        width: 18
+      }
+    },
+    '& form': {
+      display: 'flex',
+      flexDirection: 'column',
+      flexGrow: 2
+    }
+  },
+  modalHeader: {
+    display: 'flex',
+    marginBottom: 14
+  },
+  modalBody: {
+    display: 'flex',
+    flexGrow: 2
+  }
 }
 
 export { mainStyles }