feat: get upload component up to spec

new-lamassu-admin/package-lock.json

@@ -7197,6 +7197,11 @@
       "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
       "dev": true
     },
+    "attr-accept": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/attr-accept/-/attr-accept-2.2.2.tgz",
+      "integrity": "sha512-7prDjvt9HmqiZ0cl5CRjtS84sEyhsHP2coDkaZKRKVfCDo9s7iw7ChVmar78Gu9pC4SoR/28wFu/G5JJhTnqEg=="
+    },
     "auto-bind": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/auto-bind/-/auto-bind-2.1.1.tgz",
@@ -7206,9 +7211,9 @@
       },
       "dependencies": {
         "@types/react": {
-          "version": "16.14.11",
+          "version": "16.14.21",
-          "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.11.tgz",
+          "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.21.tgz",
-          "integrity": "sha512-Don0MtsZZ3fjwTJ2BsoqkyOy7e176KplEAKOpr/4XDdzinlyJBn9yfsKn5mcSgn4kh1B22+3tBnzBC1z63ybtQ==",
+          "integrity": "sha512-rY4DzPKK/4aohyWiDRHS2fotN5rhBSK6/rz1X37KzNna9HJyqtaGAbq9fVttrEPWF5ywpfIP1ITL8Xi2QZn6Eg==",
           "requires": {
             "@types/prop-types": "*",
             "@types/scheduler": "*",
@@ -7216,9 +7221,9 @@
           }
         },
         "csstype": {
-          "version": "3.0.8",
+          "version": "3.0.10",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
-          "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
+          "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
         }
       }
     },
@@ -12769,6 +12774,21 @@
       "resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz",
       "integrity": "sha512-Wz3c3XQ5xroCxd1G8b7yL0Ehkf0TC9oYC6buPFkNnU9EnaPlifeAFCyCh+iewXTyFRcg0a6j3J7FmJsIhlhBdw=="
     },
+    "file-selector": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/file-selector/-/file-selector-0.2.4.tgz",
+      "integrity": "sha512-ZDsQNbrv6qRi1YTDOEWzf5J2KjZ9KMI1Q2SGeTkCJmNNW25Jg4TW4UMcmoqcg4WrAyKRcpBXdbWRxkfrOzVRbA==",
+      "requires": {
+        "tslib": "^2.0.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+        }
+      }
+    },
     "file-system-cache": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/file-system-cache/-/file-system-cache-1.0.5.tgz",
@@ -21819,6 +21839,16 @@
         "prop-types": "^15.6.0"
       }
     },
+    "react-dropzone": {
+      "version": "11.4.2",
+      "resolved": "https://registry.npmjs.org/react-dropzone/-/react-dropzone-11.4.2.tgz",
+      "integrity": "sha512-ocYzYn7Qgp0tFc1gQtUTOaHHSzVTwhWHxxY+r7cj2jJTPfMTZB5GWSJHdIVoxsl+EQENpjJ/6Zvcw0BqKZQ+Eg==",
+      "requires": {
+        "attr-accept": "^2.2.1",
+        "file-selector": "^0.2.2",
+        "prop-types": "^15.7.2"
+      }
+    },
     "react-error-overlay": {
       "version": "6.0.9",
       "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz",

new-lamassu-admin/package.json

@@ -36,6 +36,7 @@
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^16.10.2",
     "react-material-ui-carousel": "^2.2.7",
+    "react-dropzone": "^11.4.2",
     "react-number-format": "^4.4.1",
     "react-otp-input": "^2.3.0",
     "react-router-dom": "5.1.2",

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

@@ -75,6 +75,8 @@ const CustomerData = ({ customer, updateCustomer }) => {
     ? 'Passed'
     : 'Failed'
 
+  const customEntries = [] // get customer custom entries
+
   const isEven = elem => elem % 2 === 0
 
   const getVisibleCards = _.filter(
@@ -322,6 +324,11 @@ const CustomerData = ({ customer, updateCustomer }) => {
             </Grid>
           </Grid>
         )}
+        {customEntries && (
+          <div className={classes.wrapper}>
+            <div className={classes.separator}>{'Custom data entry'}</div>
+          </div>
+        )}
       </div>
     </div>
   )

new-lamassu-admin/src/pages/Customers/CustomerData.styles.js

@@ -1,3 +1,5 @@
+import { offColor } from 'src/styling/variables'
+
 export default {
   header: {
     display: 'flex',
@@ -16,5 +18,24 @@ export default {
   },
   viewIcons: {
     marginRight: 12
+  },
+  wrapper: {
+    display: 'flex'
+  },
+  separator: {
+    display: 'flex',
+    flexBasis: '35%',
+    justifyContent: 'center',
+    color: offColor,
+    margin: [[8, 0, 8, 0]],
+    '&::before, &::after': {
+      content: '',
+      flexGrow: 1,
+      background: offColor,
+      height: 1,
+      fontSize: 1,
+      lineHeight: 0,
+      margin: [[0, 8, 0, 8]]
+    }
   }
 }

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

@@ -58,8 +58,7 @@ const getStep = (step, selectedValues) => {
 }
 
 const GetValues = ({ setValues }) => {
-  const { values, touched, errors } = useFormikContext()
+  const { values } = useFormikContext()
-  console.log(touched, errors, values)
 
   useEffect(() => {
     setValues && values && setValues(values)
@@ -77,9 +76,10 @@ const Wizard = ({ onClose, save, error }) => {
   const [{ step, config }, setState] = useState({
     step: 1
   })
-  console.log(liveValues)
+
+  // TODO forms error handling
   const isLastStep = step === LAST_STEP
-  const stepOptions = getStep(step, selectedValues)
+  const stepOptions = getStep(step, selectedValues, liveValues)
 
   const onContinue = async it => {
     const newConfig = R.merge(config, stepOptions.schema.cast(it))

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

@@ -1,30 +1,68 @@
 import { makeStyles } from '@material-ui/core/styles'
-import { useFormikContext } from 'formik'
+import * as R from 'ramda'
+import React, { useState, useCallback } from 'react'
+import { useDropzone } from 'react-dropzone'
+
+import { Info3 } from 'src/components/typography'
+import { offColor, subheaderColor } from 'src/styling/variables'
 
 const useStyles = makeStyles({
-  input: {
+  box: {
-    width: 200
+    boxSizing: 'border-box',
+    marginTop: 31,
+    width: 450,
+    height: 120,
+    borderStyle: 'dashed',
+    borderColor: offColor,
+    borderRadius: 4,
+    borderWidth: 1,
+    backgroundColor: subheaderColor,
+    display: 'flex',
+    justifyContent: 'center'
+  },
+  boxContent: {
+    marginTop: 30
+  },
+  board: {
+    width: 450,
+    height: 120
   }
 })
 
 const Upload = ({ type }) => {
   const classes = useStyles()
-  const { values } = useFormikContext()
+  const IMAGE = 'image'
-  console.log(values)
+
+  const [data, setData] = useState({})
+
+  const message =
+    type === IMAGE
+      ? 'Drag and drop an image or click to select a file'
+      : 'Drag and drop or click to select a file'
+
+  const onDrop = useCallback(acceptedData => {
+    setData({ preview: URL.createObjectURL(R.head(acceptedData)) })
+  }, [])
+
+  const { getRootProps, getInputProps } = useDropzone({ onDrop })
 
   return (
     <>
-      <div className={classes.board}>
+      <div {...getRootProps()} className={classes.board}>
-        <input
+        <input {...getInputProps()} />
-          type={type}
+        {R.isEmpty(data) && (
-          name={type}
+          <div className={classes.box}>
-          onClick={() => {
+            <div className={classes.boxContent}>
-            console.log(values)
+              <Info3>{message}</Info3>
-          }}
+            </div>
-          className={classes.input}
+          </div>
-        />
+        )}
+        {!R.isEmpty(data) && type === IMAGE && (
+          <div key={data.name}>
+            <img src={data.preview} className={classes.box}></img>
+          </div>
+        )}
       </div>
-      <div className={classes.picture}></div>
     </>
   )
 }

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

@@ -94,18 +94,18 @@ const entryTypeSchema = Yup.object().shape({
 })
 
 const customFileSchema = Yup.object().shape({
+  title: Yup.string().required(),
   file: Yup.mixed().required()
 })
 
 const customImageSchema = Yup.object().shape({
+  title: Yup.string().required(),
   image: Yup.mixed().required()
 })
 
 const customTextSchema = Yup.object().shape({
-  text: Yup.object({
   title: Yup.string().required(),
   data: Yup.string().required()
-  }).required()
 })
 
 const EntryType = () => {
@@ -168,7 +168,6 @@ const EntryType = () => {
 const CustomData = ({ selectedValues }) => {
   const dataTypeSelected = selectedValues?.dataType
   const upload = dataTypeSelected === 'file' || dataTypeSelected === 'image'
-  console.log(dataTypeSelected, 'LAWDOIUHJAWIDUAW', selectedValues)
   return (
     <>
       <Box display="flex" alignItems="center">
@@ -177,7 +176,7 @@ const CustomData = ({ selectedValues }) => {
       {customElements[dataTypeSelected].options.map(({ display, code }) => (
         <Field name={code} label={display} component={TextInput} width={390} />
       ))}
-      {upload && <Upload type="image"></Upload>}
+      {upload && <Upload type={dataTypeSelected}></Upload>}
     </>
   )
 }
@@ -187,19 +186,19 @@ const customElements = {
     schema: customTextSchema,
     options: customTextOptions,
     Component: CustomData,
-    initialValues: { text: { title: '', data: '' } }
+    initialValues: { data: '', title: '' }
   },
   file: {
     schema: customFileSchema,
     options: customUploadOptions,
     Component: CustomData,
-    initialValues: { file: { title: '', file: '' } }
+    initialValues: { file: '', title: '' }
   },
   image: {
     schema: customImageSchema,
     options: customUploadOptions,
     Component: CustomData,
-    initialValues: { image: { title: '', image: '' } }
+    initialValues: { image: '', title: '' }
   }
 }