feat: add upload component

new-lamassu-admin/src/pages/Customers/components/Upload.js

@@ -0,0 +1,32 @@
+import { makeStyles } from '@material-ui/core/styles'
+import { useFormikContext } from 'formik'
+
+const useStyles = makeStyles({
+  input: {
+    width: 200
+  }
+})
+
+const Upload = ({ type }) => {
+  const classes = useStyles()
+  const { values } = useFormikContext()
+  console.log(values)
+
+  return (
+    <>
+      <div className={classes.board}>
+        <input
+          type={type}
+          name={type}
+          onClick={() => {
+            console.log(values)
+          }}
+          className={classes.input}
+        />
+      </div>
+      <div className={classes.picture}></div>
+    </>
+  )
+}
+
+export default Upload

new-lamassu-admin/src/pages/Customers/components/index.js

@@ -6,6 +6,7 @@ import EditableCard from './EditableCard'
 import Field from './Field'
 import IdDataCard from './IdDataCard'
 import TransactionsList from './TransactionsList'
+import Upload from './Upload'
 
 export {
   CustomerDetails,
@@ -14,5 +15,6 @@ export {
   CustomerSidebar,
   Field,
   EditableCard,
-  Wizard
+  Wizard,
+  Upload
 }

new-lamassu-admin/src/pages/Customers/helper.js

@@ -9,11 +9,9 @@ import { RadioGroup, TextInput } from 'src/components/inputs/formik'
 import { H4 } from 'src/components/typography'
 import { errorColor } from 'src/styling/variables'
 
+import { Upload } from './components'
+
 const useStyles = makeStyles({
-  radioLabel: {
-    height: 40,
-    padding: [[0, 10]]
-  },
   radio: {
     padding: 4,
     margin: 4
@@ -25,55 +23,17 @@ const useStyles = makeStyles({
     color: errorColor
   },
   specialLabel: {
+    height: 40,
+    padding: 0,
+    width: 250
+  },
+  label: {
     height: 40,
     padding: 0
   },
   specialGrid: {
     display: 'grid',
     gridTemplateColumns: [[182, 162, 141]]
-  },
-  directionIcon: {
-    marginRight: 2
-  },
-  directionName: {
-    marginLeft: 6
-  },
-  thresholdWrapper: {
-    display: 'flex',
-    flexDirection: 'column'
-  },
-  thresholdTitle: {
-    marginTop: 50
-  },
-  thresholdContentWrapper: {
-    display: 'flex',
-    flexDirection: 'row'
-  },
-  thresholdField: {
-    marginRight: 6,
-    width: 75
-  },
-  description: {
-    marginTop: 7
-  },
-  space: {
-    marginLeft: 6,
-    marginRight: 6
-  },
-  lastSpace: {
-    marginLeft: 6
-  },
-  suspensionDays: {
-    width: 34
-  },
-  input: {
-    marginTop: -2
-  },
-  limitedInput: {
-    width: 50
-  },
-  daysInput: {
-    width: 60
   }
 })
 
@@ -180,7 +140,7 @@ const EntryType = () => {
             component={RadioGroup}
             name="dataType"
             options={dataOptions}
-            labelClassName={classes.specialLabel}
+            labelClassName={classes.label}
             radioClassName={classes.radio}
             className={classnames(classes.radioGroup, classes.specialGrid)}
           />
@@ -195,7 +155,7 @@ const EntryType = () => {
             component={RadioGroup}
             name="requirement"
             options={requirementOptions}
-            labelClassName={classes.specialLabel}
+            labelClassName={classes.label}
             radioClassName={classes.radio}
             className={classnames(classes.radioGroup, classes.specialGrid)}
           />
@@ -217,7 +177,7 @@ const CustomData = ({ selectedValues }) => {
       {customElements[dataTypeSelected].options.map(({ display, code }) => (
         <Field name={code} label={display} component={TextInput} width={390} />
       ))}
-      {upload && <H4 type="image">{'OI'}</H4>}
+      {upload && <Upload type="image"></Upload>}
     </>
   )
 }