From d27a9847bb0cc01da300ddf597181e77b04e03f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= <josepfo.w@gmail.com>
Date: Fri, 17 Sep 2021 11:32:43 +0100
Subject: [PATCH 01/12] feat: overview rework and customer data mosaic view

---
 .../src/pages/Customers/CustomerProfile.js    | 33 +++++++++++++++++++
 1 file changed, 33 insertions(+)

diff --git a/new-lamassu-admin/src/pages/Customers/CustomerProfile.js b/new-lamassu-admin/src/pages/Customers/CustomerProfile.js
index 657cbf47..a3a3ef50 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerProfile.js
+++ b/new-lamassu-admin/src/pages/Customers/CustomerProfile.js
@@ -1,6 +1,7 @@
 import { useQuery, useMutation } from '@apollo/react-hooks'
 import { makeStyles, Breadcrumbs, Box } from '@material-ui/core'
 import NavigateNextIcon from '@material-ui/icons/NavigateNext'
+// import classnames from 'classnames'
 import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { memo, useState } from 'react'
@@ -246,6 +247,38 @@ const CustomerProfile = memo(() => {
             </div>
           )}
         </div>
+        <div className={classes.rightSidePanel}>
+          {isOverview && (
+            <div>
+              <Box
+                className={classes.customerDetails}
+                display="flex"
+                justifyContent="space-between">
+                <CustomerDetails
+                  customer={customerData}
+                  locale={locale}
+                  setShowCompliance={() => setShowCompliance(!showCompliance)}
+                />
+              </Box>
+              <div>
+                <TransactionsList
+                  customer={customerData}
+                  data={sortedTransactions}
+                  locale={locale}
+                  loading={loading}
+                />
+              </div>
+              <div>
+                <ActionButton
+                  className={classes.customerDiscount}
+                  color="primary"
+                  onClick={() => {}}>
+                  {`Add individual discount`}
+                </ActionButton>
+              </div>
+            </div>
+          )}
+        </div>
         <div className={classes.rightSidePanel}>
           {isOverview && (
             <div>

From 412f11f7f07ea6cfbe88c2a7afb846fc34e84284 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= <josepfo.w@gmail.com>
Date: Tue, 12 Oct 2021 13:54:36 +0100
Subject: [PATCH 02/12] feat: add icons and make customer data cards editable

---
 .../src/components/buttons/FeatureButton.js              | 4 ++--
 new-lamassu-admin/src/pages/Customers/CustomerProfile.js | 9 ---------
 2 files changed, 2 insertions(+), 11 deletions(-)

diff --git a/new-lamassu-admin/src/components/buttons/FeatureButton.js b/new-lamassu-admin/src/components/buttons/FeatureButton.js
index 3fe97cd7..86a06c5e 100644
--- a/new-lamassu-admin/src/components/buttons/FeatureButton.js
+++ b/new-lamassu-admin/src/components/buttons/FeatureButton.js
@@ -32,8 +32,8 @@ const styles = {
 const useStyles = makeStyles(styles)
 
 const FeatureButton = memo(
-  ({ className, Icon, InverseIcon, children, ...props }) => {
-    const classes = useStyles()
+  ({ className, Icon, InverseIcon, children, active, ...props }) => {
+    const classes = useStyles({ active })
 
     const classNames = {
       [classes.featureButton]: true,
diff --git a/new-lamassu-admin/src/pages/Customers/CustomerProfile.js b/new-lamassu-admin/src/pages/Customers/CustomerProfile.js
index a3a3ef50..d6e46a9e 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerProfile.js
+++ b/new-lamassu-admin/src/pages/Customers/CustomerProfile.js
@@ -1,7 +1,6 @@
 import { useQuery, useMutation } from '@apollo/react-hooks'
 import { makeStyles, Breadcrumbs, Box } from '@material-ui/core'
 import NavigateNextIcon from '@material-ui/icons/NavigateNext'
-// import classnames from 'classnames'
 import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { memo, useState } from 'react'
@@ -268,14 +267,6 @@ const CustomerProfile = memo(() => {
                   loading={loading}
                 />
               </div>
-              <div>
-                <ActionButton
-                  className={classes.customerDiscount}
-                  color="primary"
-                  onClick={() => {}}>
-                  {`Add individual discount`}
-                </ActionButton>
-              </div>
             </div>
           )}
         </div>

From d435f24105b22d83f0fed7d587193a7b12a02d6b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= <josepfo.w@gmail.com>
Date: Mon, 18 Oct 2021 13:42:55 +0100
Subject: [PATCH 03/12] feat: add dynamic position to editable cards,
 reject/authorize buttons

---
 .../src/pages/Customers/components/EditableCard.js           | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/new-lamassu-admin/src/pages/Customers/components/EditableCard.js b/new-lamassu-admin/src/pages/Customers/components/EditableCard.js
index fc75f458..492ca943 100644
--- a/new-lamassu-admin/src/pages/Customers/components/EditableCard.js
+++ b/new-lamassu-admin/src/pages/Customers/components/EditableCard.js
@@ -123,7 +123,12 @@ const EditableCard = ({
     [classes.label1Rejected]: state === OVERRIDE_REJECTED,
     [classes.label1Accepted]: state === OVERRIDE_AUTHORIZED
   }
+<<<<<<< HEAD
 
+=======
+  const isNotAuthorized =
+    state === OVERRIDE_REJECTED || state === OVERRIDE_PENDING
+>>>>>>> feat: add dynamic position to editable cards, reject/authorize buttons
   const authorized =
     state === OVERRIDE_PENDING
       ? { label: 'Pending', type: 'neutral' }

From c31005d6ef4a77694d5f86c766613c49cf090501 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= <josepfo.w@gmail.com>
Date: Tue, 19 Oct 2021 10:36:03 +0100
Subject: [PATCH 04/12] feat: addd manual entry option and wizard first step

---
 .../src/pages/Customers/CustomerProfile.js    |  25 ++-
 .../pages/Customers/CustomerProfile.styles.js |   8 +-
 .../src/pages/Customers/Wizard.js             | 115 +++++++++++++
 .../src/pages/Customers/components/index.js   |   5 +-
 .../src/pages/Customers/helper.js             | 162 +++++++++++++++++-
 .../src/styling/icons/button/data/white.svg   |  15 ++
 .../src/styling/icons/button/data/zodiac.svg  |  15 ++
 7 files changed, 341 insertions(+), 4 deletions(-)
 create mode 100644 new-lamassu-admin/src/pages/Customers/Wizard.js
 create mode 100644 new-lamassu-admin/src/styling/icons/button/data/white.svg
 create mode 100644 new-lamassu-admin/src/styling/icons/button/data/zodiac.svg

diff --git a/new-lamassu-admin/src/pages/Customers/CustomerProfile.js b/new-lamassu-admin/src/pages/Customers/CustomerProfile.js
index d6e46a9e..01049c41 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerProfile.js
+++ b/new-lamassu-admin/src/pages/Customers/CustomerProfile.js
@@ -16,6 +16,8 @@ import { ReactComponent as AuthorizeReversedIcon } from 'src/styling/icons/butto
 import { ReactComponent as AuthorizeIcon } from 'src/styling/icons/button/authorize/zodiac.svg'
 import { ReactComponent as BlockReversedIcon } from 'src/styling/icons/button/block/white.svg'
 import { ReactComponent as BlockIcon } from 'src/styling/icons/button/block/zodiac.svg'
+import { ReactComponent as DataReversedIcon } from 'src/styling/icons/button/data/white.svg'
+import { ReactComponent as DataIcon } from 'src/styling/icons/button/data/zodiac.svg'
 import { ReactComponent as DiscountReversedIcon } from 'src/styling/icons/button/discount/white.svg'
 import { ReactComponent as Discount } from 'src/styling/icons/button/discount/zodiac.svg'
 import { fromNamespace, namespaces } from 'src/utils/config'
@@ -25,7 +27,8 @@ import styles from './CustomerProfile.styles'
 import {
   CustomerDetails,
   TransactionsList,
-  CustomerSidebar
+  CustomerSidebar,
+  Wizard
 } from './components'
 import { getFormattedPhone, getName } from './helper'
 
@@ -110,7 +113,10 @@ const SET_CUSTOMER = gql`
 
 const CustomerProfile = memo(() => {
   const history = useHistory()
+
   const [showCompliance, setShowCompliance] = useState(false)
+  const [wizard, setWizard] = useState(false)
+  const [error] = useState(null)
   const [clickedItem, setClickedItem] = useState('overview')
   const { id: customerId } = useParams()
 
@@ -184,6 +190,16 @@ const CustomerProfile = memo(() => {
                 />
               </div>
               <Label1 className={classes.actionLabel}>Actions</Label1>
+              <div>
+                <ActionButton
+                  className={classes.customerManualDataEntry}
+                  color="primary"
+                  Icon={DataIcon}
+                  InverseIcon={DataReversedIcon}
+                  onClick={() => setWizard(true)}>
+                  {`Manual data entry`}
+                </ActionButton>
+              </div>
               <div>
                 <ActionButton
                   className={classes.customerDiscount}
@@ -301,6 +317,13 @@ const CustomerProfile = memo(() => {
             </div>
           )}
         </div>
+        {wizard && (
+          <Wizard
+            error={error?.message}
+            save={() => {}}
+            onClose={() => setWizard(null)}
+          />
+        )}
       </div>
     </>
   )
diff --git a/new-lamassu-admin/src/pages/Customers/CustomerProfile.styles.js b/new-lamassu-admin/src/pages/Customers/CustomerProfile.styles.js
index 69094460..6326b300 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerProfile.styles.js
+++ b/new-lamassu-admin/src/pages/Customers/CustomerProfile.styles.js
@@ -22,10 +22,16 @@ export default {
     padding: [[0, props.blocked ? 35 : 48, 0]]
   }),
   customerDiscount: {
+    display: 'flex',
+    flexDirection: 'row',
+    margin: [[0, 0, 4, 0]],
+    padding: [[0, 23.5, 0]]
+  },
+  customerManualDataEntry: {
     display: 'flex',
     flexDirection: 'row',
     margin: [[8, 0, 4, 0]],
-    padding: [[0, 24, 0]]
+    padding: [[0, 40.5, 0]]
   },
   panels: {
     display: 'flex'
diff --git a/new-lamassu-admin/src/pages/Customers/Wizard.js b/new-lamassu-admin/src/pages/Customers/Wizard.js
new file mode 100644
index 00000000..75f05272
--- /dev/null
+++ b/new-lamassu-admin/src/pages/Customers/Wizard.js
@@ -0,0 +1,115 @@
+import { makeStyles } from '@material-ui/core'
+import { Form, Formik } from 'formik'
+import * as R from 'ramda'
+import React, { useState } from 'react'
+
+import ErrorMessage from 'src/components/ErrorMessage'
+import Modal from 'src/components/Modal'
+import Stepper from 'src/components/Stepper'
+import { Button } from 'src/components/buttons'
+import { comet } from 'src/styling/variables'
+
+import { entryType } from './helper'
+
+const LAST_STEP = 2
+
+const styles = {
+  stepper: {
+    margin: [[16, 0, 14, 0]]
+  },
+  submit: {
+    display: 'flex',
+    flexDirection: 'row',
+    margin: [['auto', 0, 24]]
+  },
+  button: {
+    marginLeft: 'auto'
+  },
+  form: {
+    height: '100%',
+    display: 'flex',
+    flexDirection: 'column'
+  },
+  infoTitle: {
+    margin: [[18, 0, 20, 0]]
+  },
+  infoCurrentText: {
+    color: comet
+  },
+  blankSpace: {
+    padding: [[0, 30]],
+    margin: [[0, 4, 0, 2]],
+    borderBottom: `1px solid ${comet}`,
+    display: 'inline-block'
+  }
+}
+
+const useStyles = makeStyles(styles)
+
+const getStep = step => {
+  switch (step) {
+    case 1:
+      return entryType
+    default:
+      return entryType
+  }
+}
+
+const Wizard = ({ onClose, save, error }) => {
+  const classes = useStyles()
+
+  const [{ step, config }, setState] = useState({
+    step: 1
+  })
+
+  const isLastStep = step === LAST_STEP
+  const stepOptions = getStep(step)
+  const onContinue = async it => {
+    const newConfig = R.merge(config, stepOptions.schema.cast(it))
+
+    if (isLastStep) {
+      return save(newConfig)
+    }
+
+    setState({
+      step: step + 1,
+      config: newConfig
+    })
+  }
+
+  return (
+    <>
+      <Modal
+        title="Manual data entry"
+        handleClose={onClose}
+        width={520}
+        height={520}
+        open={true}>
+        <Stepper
+          className={classes.stepper}
+          steps={LAST_STEP}
+          currentStep={step}
+        />
+        <Formik
+          validateOnBlur={false}
+          validateOnChange={false}
+          enableReinitialize
+          onSubmit={onContinue}
+          initialValues={stepOptions.initialValues}
+          validationSchema={stepOptions.schema}>
+          <Form className={classes.form}>
+            <stepOptions.Component {...stepOptions.props} />
+            <div className={classes.submit}>
+              {error && <ErrorMessage>Failed to save</ErrorMessage>}
+              <Button className={classes.button} type="submit">
+                {isLastStep ? 'Finish' : 'Next'}
+              </Button>
+            </div>
+          </Form>
+        </Formik>
+      </Modal>
+    </>
+  )
+}
+
+export default Wizard
diff --git a/new-lamassu-admin/src/pages/Customers/components/index.js b/new-lamassu-admin/src/pages/Customers/components/index.js
index a8b7b184..721c42f0 100644
--- a/new-lamassu-admin/src/pages/Customers/components/index.js
+++ b/new-lamassu-admin/src/pages/Customers/components/index.js
@@ -1,3 +1,5 @@
+import Wizard from '../Wizard'
+
 import CustomerDetails from './CustomerDetails'
 import CustomerSidebar from './CustomerSidebar'
 import EditableCard from './EditableCard'
@@ -11,5 +13,6 @@ export {
   TransactionsList,
   CustomerSidebar,
   Field,
-  EditableCard
+  EditableCard,
+  Wizard
 }
diff --git a/new-lamassu-admin/src/pages/Customers/helper.js b/new-lamassu-admin/src/pages/Customers/helper.js
index 849f898e..f02da3a4 100644
--- a/new-lamassu-admin/src/pages/Customers/helper.js
+++ b/new-lamassu-admin/src/pages/Customers/helper.js
@@ -1,5 +1,81 @@
+import { makeStyles, Box } from '@material-ui/core'
+import classnames from 'classnames'
+import { Field, useFormikContext } from 'formik'
 import { parsePhoneNumberFromString } from 'libphonenumber-js'
 import * as R from 'ramda'
+import * as Yup from 'yup'
+
+import { RadioGroup } from 'src/components/inputs/formik'
+import { H4 } from 'src/components/typography'
+import { errorColor } from 'src/styling/variables'
+
+const useStyles = makeStyles({
+  radioLabel: {
+    height: 40,
+    padding: [[0, 10]]
+  },
+  radio: {
+    padding: 4,
+    margin: 4
+  },
+  radioGroup: {
+    flexDirection: 'row'
+  },
+  error: {
+    color: errorColor
+  },
+  specialLabel: {
+    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
+  }
+})
 
 const CUSTOMER_BLOCKED = 'blocked'
 
@@ -27,4 +103,88 @@ const getName = it => {
   ) ?? ''}`.trim()
 }
 
-export { getAuthorizedStatus, getFormattedPhone, getName }
+const entryOptions = [
+  { display: 'Custom entry', code: 'custom' },
+  { display: 'Populate existing requirement', code: 'requirement' }
+]
+
+const dataOptions = [
+  { display: 'Text', code: 'text' },
+  { display: 'File', code: 'file' },
+  { display: 'Image', code: 'image' }
+]
+
+const requirementOptions = [
+  { display: 'Birthdate', code: 'birthdate' },
+  { display: 'ID card image', code: 'idCardPhoto' },
+  { display: 'ID data', code: 'idCardData' },
+  { display: 'Customer camera', code: 'facephoto' },
+  { display: 'US SSN', code: 'usSsn' }
+]
+
+const entryTypeSchema = Yup.object().shape({
+  entryType: Yup.object({
+    entryType: Yup.string().required()
+  }).required()
+})
+
+const EntryType = () => {
+  const classes = useStyles()
+  const { values } = useFormikContext()
+  const displayCustom = values.entryType === 'custom'
+
+  return (
+    <>
+      <Box display="flex" alignItems="center">
+        <H4>Type of entry</H4>
+      </Box>
+      <Field
+        component={RadioGroup}
+        name="entryType"
+        options={entryOptions}
+        labelClassName={classes.specialLabel}
+        radioClassName={classes.radio}
+        className={classnames(classes.radioGroup, classes.specialGrid)}
+      />
+      {displayCustom && (
+        <div>
+          <Box display="flex" alignItems="center">
+            <H4>Type of data</H4>
+          </Box>
+          <Field
+            component={RadioGroup}
+            name="dataType"
+            options={dataOptions}
+            labelClassName={classes.specialLabel}
+            radioClassName={classes.radio}
+            className={classnames(classes.radioGroup, classes.specialGrid)}
+          />
+        </div>
+      )}
+      {!displayCustom && (
+        <div>
+          <Box display="flex" alignItems="center">
+            <H4>Requirements</H4>
+          </Box>
+          <Field
+            component={RadioGroup}
+            name="requirement"
+            options={requirementOptions}
+            labelClassName={classes.specialLabel}
+            radioClassName={classes.radio}
+            className={classnames(classes.radioGroup, classes.specialGrid)}
+          />
+        </div>
+      )}
+    </>
+  )
+}
+
+const entryType = {
+  schema: entryTypeSchema,
+  options: entryOptions,
+  Component: EntryType,
+  initialValues: { entryType: { entryType: '' } }
+}
+
+export { getAuthorizedStatus, getFormattedPhone, getName, entryType }
diff --git a/new-lamassu-admin/src/styling/icons/button/data/white.svg b/new-lamassu-admin/src/styling/icons/button/data/white.svg
new file mode 100644
index 00000000..d6410eb2
--- /dev/null
+++ b/new-lamassu-admin/src/styling/icons/button/data/white.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/data/white</title>
+    <g id="icon/button/data/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Data-icon---small" transform="translate(0.500000, 0.500000)" stroke="#FFFFFF">
+            <path d="M11,2.44444444 L11,5.5 C11,6.85002939 8.53756612,7.94444444 5.5,7.94444444 C2.521994,7.94444444 0.0939612041,6.81341452 1.11160464e-12,5.5 L0.00282594991,2.44444444" id="oval-3"></path>
+            <path d="M11,5.5 L11,8.55555556 C11,9.90558494 8.53756612,11 5.5,11 C2.521994,11 0.0939612041,9.86897007 1.11160464e-12,8.55555556 L0.00282594991,5.5" id="oval-2"></path>
+            <ellipse id="oval-1" cx="5.5" cy="2.44444444" rx="5.5" ry="2.44444444"></ellipse>
+        </g>
+        <g id="Group-9" transform="translate(0.000000, 4.000000)">
+            <circle id="Oval" stroke="#FFFFFF" fill="#5F668A" cx="4" cy="4" r="3.5"></circle>
+            <polygon id="Path" fill="#FFFFFF" fill-rule="nonzero" points="4.33333333 3.66666667 6 3.66666667 6 4.33333333 4.33333333 4.33333333 4.33333333 6 3.66666667 6 3.66666667 4.33333333 2 4.33333333 2 3.66666667 3.66666667 3.66666667 3.66666667 2 4.33333333 2"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/new-lamassu-admin/src/styling/icons/button/data/zodiac.svg b/new-lamassu-admin/src/styling/icons/button/data/zodiac.svg
new file mode 100644
index 00000000..ec78d0d6
--- /dev/null
+++ b/new-lamassu-admin/src/styling/icons/button/data/zodiac.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/data/zodiac</title>
+    <g id="icon/button/data/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Data-icon---small" transform="translate(1.500000, 0.500000)" stroke="#1B2559">
+            <path d="M10,2 L10,4.77777778 C10,6.00507722 7.76142375,7 5,7 C2.29272181,7 0.0854192765,5.97179097 0,4.77777778 L0.00256904537,2" id="oval-3"></path>
+            <path d="M10,5 L10,7.77777778 C10,9.00507722 7.76142375,10 5,10 C2.29272181,10 0.0854192765,8.97179097 0,7.77777778 L0.00256904537,5" id="oval-2"></path>
+            <ellipse id="oval-1" cx="5" cy="2" rx="5" ry="2"></ellipse>
+        </g>
+        <g id="Group-9" transform="translate(0.000000, 4.000000)">
+            <circle id="Oval" stroke="#1B2559" fill="#EBEFFF" cx="4" cy="4" r="3.5"></circle>
+            <polygon id="Path" fill="#1B2559" fill-rule="nonzero" points="4.33333333 3.66666667 6 3.66666667 6 4.33333333 4.33333333 4.33333333 4.33333333 6 3.66666667 6 3.66666667 4.33333333 2 4.33333333 2 3.66666667 3.66666667 3.66666667 3.66666667 2 4.33333333 2"></polygon>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

From 53f32ba49bec7e0f714cb9f860879cb6fd3e166b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= <josepfo.w@gmail.com>
Date: Tue, 19 Oct 2021 19:00:05 +0100
Subject: [PATCH 05/12] feat: add custom file/image to the wizard

---
 .../src/pages/Customers/CustomerData.js       | 32 ++++---
 .../src/pages/Customers/Wizard.js             | 40 +++++++--
 .../Customers/components/EditableCard.js      | 10 +--
 .../src/pages/Customers/components/Upload.js  |  0
 .../src/pages/Customers/helper.js             | 85 +++++++++++++++++--
 5 files changed, 131 insertions(+), 36 deletions(-)
 create mode 100644 new-lamassu-admin/src/pages/Customers/components/Upload.js

diff --git a/new-lamassu-admin/src/pages/Customers/CustomerData.js b/new-lamassu-admin/src/pages/Customers/CustomerData.js
index 6293893c..f6b41da7 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerData.js
+++ b/new-lamassu-admin/src/pages/Customers/CustomerData.js
@@ -256,21 +256,25 @@ const CustomerData = ({ customer, updateCustomer }) => {
     }
   ]
 
-  const editableCard = ({
-    title,
-    authorize,
-    reject,
-    state,
-    titleIcon,
-    data,
-    save,
-    children,
-    validationSchema,
-    initialValues
-  }) => {
+  const editableCard = (
+    {
+      title,
+      authorize,
+      reject,
+      state,
+      titleIcon,
+      data,
+      save,
+      children,
+      validationSchema,
+      initialValues
+    },
+    idx
+  ) => {
     return (
       <EditableCard
         title={title}
+        key={idx}
         authorize={authorize}
         reject={reject}
         state={state}
@@ -308,12 +312,12 @@ const CustomerData = ({ customer, updateCustomer }) => {
           <Grid container>
             <Grid container direction="column" item xs={6}>
               {visibleCards.map((elem, idx) => {
-                return isEven(idx) ? editableCard(elem) : null
+                return isEven(idx) ? editableCard(elem, idx) : null
               })}
             </Grid>
             <Grid container direction="column" item xs={6}>
               {visibleCards.map((elem, idx) => {
-                return !isEven(idx) ? editableCard(elem) : null
+                return !isEven(idx) ? editableCard(elem, idx) : null
               })}
             </Grid>
           </Grid>
diff --git a/new-lamassu-admin/src/pages/Customers/Wizard.js b/new-lamassu-admin/src/pages/Customers/Wizard.js
index 75f05272..6a65b3df 100644
--- a/new-lamassu-admin/src/pages/Customers/Wizard.js
+++ b/new-lamassu-admin/src/pages/Customers/Wizard.js
@@ -1,7 +1,7 @@
 import { makeStyles } from '@material-ui/core'
-import { Form, Formik } from 'formik'
+import { Form, Formik, useFormikContext } from 'formik'
 import * as R from 'ramda'
-import React, { useState } from 'react'
+import React, { useState, Fragment, useEffect } from 'react'
 
 import ErrorMessage from 'src/components/ErrorMessage'
 import Modal from 'src/components/Modal'
@@ -9,7 +9,7 @@ import Stepper from 'src/components/Stepper'
 import { Button } from 'src/components/buttons'
 import { comet } from 'src/styling/variables'
 
-import { entryType } from './helper'
+import { entryType, customElements } from './helper'
 
 const LAST_STEP = 2
 
@@ -46,26 +46,44 @@ const styles = {
 
 const useStyles = makeStyles(styles)
 
-const getStep = step => {
+const getStep = (step, selectedValues) => {
   switch (step) {
     case 1:
       return entryType
+    case 2:
+      return customElements[selectedValues?.dataType]
     default:
-      return entryType
+      return Fragment
   }
 }
 
+const GetValues = ({ setValues }) => {
+  const { values, touched, errors } = useFormikContext()
+  console.log(touched, errors, values)
+
+  useEffect(() => {
+    setValues && values && setValues(values)
+  }, [setValues, values])
+
+  return null
+}
+
 const Wizard = ({ onClose, save, error }) => {
   const classes = useStyles()
 
+  const [selectedValues, setSelectedValues] = useState(null)
+  const [liveValues, setLiveValues] = useState({})
+
   const [{ step, config }, setState] = useState({
     step: 1
   })
-
+  console.log(liveValues)
   const isLastStep = step === LAST_STEP
-  const stepOptions = getStep(step)
+  const stepOptions = getStep(step, selectedValues)
+
   const onContinue = async it => {
     const newConfig = R.merge(config, stepOptions.schema.cast(it))
+    setSelectedValues(newConfig)
 
     if (isLastStep) {
       return save(newConfig)
@@ -98,11 +116,15 @@ const Wizard = ({ onClose, save, error }) => {
           initialValues={stepOptions.initialValues}
           validationSchema={stepOptions.schema}>
           <Form className={classes.form}>
-            <stepOptions.Component {...stepOptions.props} />
+            <GetValues setValues={setLiveValues} />
+            <stepOptions.Component
+              selectedValues={selectedValues}
+              {...stepOptions.props}
+            />
             <div className={classes.submit}>
               {error && <ErrorMessage>Failed to save</ErrorMessage>}
               <Button className={classes.button} type="submit">
-                {isLastStep ? 'Finish' : 'Next'}
+                {isLastStep ? 'Add Data' : 'Next'}
               </Button>
             </div>
           </Form>
diff --git a/new-lamassu-admin/src/pages/Customers/components/EditableCard.js b/new-lamassu-admin/src/pages/Customers/components/EditableCard.js
index 492ca943..1756b635 100644
--- a/new-lamassu-admin/src/pages/Customers/components/EditableCard.js
+++ b/new-lamassu-admin/src/pages/Customers/components/EditableCard.js
@@ -38,7 +38,7 @@ const fieldStyles = {
   },
   label: {
     color: comet,
-    margin: [[0, 3]]
+    margin: [[0, 0, 0, 0]]
   },
   notEditing: {
     display: 'flex',
@@ -58,8 +58,10 @@ const fieldStyles = {
     }
   },
   editing: {
-    '& > input': {
-      padding: 0
+    '& > div': {
+      '& > input': {
+        padding: 0
+      }
     }
   }
 }
@@ -88,9 +90,7 @@ const EditableField = ({ editing, field, size, ...props }) => {
           <FormikField
             className={classes.editing}
             id={field.name}
-            name={field.name}
             component={field.component}
-            placeholder={field.placeholder}
             value={field.value}
             type={field.type}
             width={size}
diff --git a/new-lamassu-admin/src/pages/Customers/components/Upload.js b/new-lamassu-admin/src/pages/Customers/components/Upload.js
new file mode 100644
index 00000000..e69de29b
diff --git a/new-lamassu-admin/src/pages/Customers/helper.js b/new-lamassu-admin/src/pages/Customers/helper.js
index f02da3a4..4731c1d0 100644
--- a/new-lamassu-admin/src/pages/Customers/helper.js
+++ b/new-lamassu-admin/src/pages/Customers/helper.js
@@ -5,7 +5,7 @@ import { parsePhoneNumberFromString } from 'libphonenumber-js'
 import * as R from 'ramda'
 import * as Yup from 'yup'
 
-import { RadioGroup } from 'src/components/inputs/formik'
+import { RadioGroup, TextInput } from 'src/components/inputs/formik'
 import { H4 } from 'src/components/typography'
 import { errorColor } from 'src/styling/variables'
 
@@ -122,16 +122,41 @@ const requirementOptions = [
   { display: 'US SSN', code: 'usSsn' }
 ]
 
+const customTextOptions = [
+  { display: 'Data entry title', code: 'title' },
+  { display: 'Data entry', code: 'data' }
+]
+
+const customUploadOptions = [{ display: 'Data entry title', code: 'title' }]
+
 const entryTypeSchema = Yup.object().shape({
-  entryType: Yup.object({
-    entryType: Yup.string().required()
+  entryType: Yup.string().required()
+})
+
+const customFileSchema = Yup.object().shape({
+  file: Yup.mixed().required()
+})
+
+const customImageSchema = Yup.object().shape({
+  image: Yup.mixed().required()
+})
+
+const customTextSchema = Yup.object().shape({
+  text: Yup.object({
+    title: Yup.string().required(),
+    data: Yup.string().required()
   }).required()
 })
 
 const EntryType = () => {
   const classes = useStyles()
   const { values } = useFormikContext()
-  const displayCustom = values.entryType === 'custom'
+
+  const CUSTOM = 'custom'
+  const REQUIREMENT = 'requirement'
+
+  const displayCustomOptions = values.entryType === CUSTOM
+  const displayRequirementOptions = values.entryType === REQUIREMENT
 
   return (
     <>
@@ -146,7 +171,7 @@ const EntryType = () => {
         radioClassName={classes.radio}
         className={classnames(classes.radioGroup, classes.specialGrid)}
       />
-      {displayCustom && (
+      {displayCustomOptions && (
         <div>
           <Box display="flex" alignItems="center">
             <H4>Type of data</H4>
@@ -161,7 +186,7 @@ const EntryType = () => {
           />
         </div>
       )}
-      {!displayCustom && (
+      {displayRequirementOptions && (
         <div>
           <Box display="flex" alignItems="center">
             <H4>Requirements</H4>
@@ -180,11 +205,55 @@ 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">
+        <H4>{`Custom ${dataTypeSelected} entry`}</H4>
+      </Box>
+      {customElements[dataTypeSelected].options.map(({ display, code }) => (
+        <Field name={code} label={display} component={TextInput} width={390} />
+      ))}
+      {upload && <H4 type="image">{'OI'}</H4>}
+    </>
+  )
+}
+
+const customElements = {
+  text: {
+    schema: customTextSchema,
+    options: customTextOptions,
+    Component: CustomData,
+    initialValues: { text: { title: '', data: '' } }
+  },
+  file: {
+    schema: customFileSchema,
+    options: customUploadOptions,
+    Component: CustomData,
+    initialValues: { file: { title: '', file: '' } }
+  },
+  image: {
+    schema: customImageSchema,
+    options: customUploadOptions,
+    Component: CustomData,
+    initialValues: { image: { title: '', image: '' } }
+  }
+}
+
 const entryType = {
   schema: entryTypeSchema,
   options: entryOptions,
   Component: EntryType,
-  initialValues: { entryType: { entryType: '' } }
+  initialValues: { entryType: '' }
 }
 
-export { getAuthorizedStatus, getFormattedPhone, getName, entryType }
+export {
+  getAuthorizedStatus,
+  getFormattedPhone,
+  getName,
+  entryType,
+  customElements
+}

From bedb75b767f0a9ccfe4705852dfe38dc7fbe7bb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= <josepfo.w@gmail.com>
Date: Tue, 19 Oct 2021 21:33:08 +0100
Subject: [PATCH 06/12] feat: add upload component

---
 .../src/pages/Customers/components/Upload.js  | 32 ++++++++++
 .../src/pages/Customers/components/index.js   |  4 +-
 .../src/pages/Customers/helper.js             | 60 ++++---------------
 3 files changed, 45 insertions(+), 51 deletions(-)

diff --git a/new-lamassu-admin/src/pages/Customers/components/Upload.js b/new-lamassu-admin/src/pages/Customers/components/Upload.js
index e69de29b..33f52abd 100644
--- a/new-lamassu-admin/src/pages/Customers/components/Upload.js
+++ b/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
diff --git a/new-lamassu-admin/src/pages/Customers/components/index.js b/new-lamassu-admin/src/pages/Customers/components/index.js
index 721c42f0..5e52dd81 100644
--- a/new-lamassu-admin/src/pages/Customers/components/index.js
+++ b/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
 }
diff --git a/new-lamassu-admin/src/pages/Customers/helper.js b/new-lamassu-admin/src/pages/Customers/helper.js
index 4731c1d0..18357027 100644
--- a/new-lamassu-admin/src/pages/Customers/helper.js
+++ b/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>}
     </>
   )
 }

From 10b8838cf027e2b149cf51ac432be79b0f3c4e3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= <josepfo.w@gmail.com>
Date: Wed, 20 Oct 2021 22:50:38 +0100
Subject: [PATCH 07/12] feat: get upload component up to spec

---
 new-lamassu-admin/package-lock.json           | 42 ++++++++++--
 new-lamassu-admin/package.json                |  1 +
 .../src/pages/Customers/CustomerData.js       |  7 ++
 .../pages/Customers/CustomerData.styles.js    | 21 ++++++
 .../src/pages/Customers/Wizard.js             |  8 +--
 .../src/pages/Customers/components/Upload.js  | 68 +++++++++++++++----
 .../src/pages/Customers/helper.js             | 17 +++--
 7 files changed, 130 insertions(+), 34 deletions(-)

diff --git a/new-lamassu-admin/package-lock.json b/new-lamassu-admin/package-lock.json
index 5dac80f0..f6429e07 100644
--- a/new-lamassu-admin/package-lock.json
+++ b/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",
-          "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.11.tgz",
-          "integrity": "sha512-Don0MtsZZ3fjwTJ2BsoqkyOy7e176KplEAKOpr/4XDdzinlyJBn9yfsKn5mcSgn4kh1B22+3tBnzBC1z63ybtQ==",
+          "version": "16.14.21",
+          "resolved": "https://registry.npmjs.org/@types/react/-/react-16.14.21.tgz",
+          "integrity": "sha512-rY4DzPKK/4aohyWiDRHS2fotN5rhBSK6/rz1X37KzNna9HJyqtaGAbq9fVttrEPWF5ywpfIP1ITL8Xi2QZn6Eg==",
           "requires": {
             "@types/prop-types": "*",
             "@types/scheduler": "*",
@@ -7216,9 +7221,9 @@
           }
         },
         "csstype": {
-          "version": "3.0.8",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz",
-          "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw=="
+          "version": "3.0.10",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
+          "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",
diff --git a/new-lamassu-admin/package.json b/new-lamassu-admin/package.json
index 041b402c..24c17fa3 100644
--- a/new-lamassu-admin/package.json
+++ b/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",
diff --git a/new-lamassu-admin/src/pages/Customers/CustomerData.js b/new-lamassu-admin/src/pages/Customers/CustomerData.js
index f6b41da7..838c53e2 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerData.js
+++ b/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>
   )
diff --git a/new-lamassu-admin/src/pages/Customers/CustomerData.styles.js b/new-lamassu-admin/src/pages/Customers/CustomerData.styles.js
index 5dfecd1a..d18ff46a 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerData.styles.js
+++ b/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]]
+    }
   }
 }
diff --git a/new-lamassu-admin/src/pages/Customers/Wizard.js b/new-lamassu-admin/src/pages/Customers/Wizard.js
index 6a65b3df..bc1652ec 100644
--- a/new-lamassu-admin/src/pages/Customers/Wizard.js
+++ b/new-lamassu-admin/src/pages/Customers/Wizard.js
@@ -58,8 +58,7 @@ const getStep = (step, selectedValues) => {
 }
 
 const GetValues = ({ setValues }) => {
-  const { values, touched, errors } = useFormikContext()
-  console.log(touched, errors, values)
+  const { values } = useFormikContext()
 
   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))
diff --git a/new-lamassu-admin/src/pages/Customers/components/Upload.js b/new-lamassu-admin/src/pages/Customers/components/Upload.js
index 33f52abd..4221df0f 100644
--- a/new-lamassu-admin/src/pages/Customers/components/Upload.js
+++ b/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: {
-    width: 200
+  box: {
+    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()
-  console.log(values)
+  const IMAGE = 'image'
+
+  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}>
-        <input
-          type={type}
-          name={type}
-          onClick={() => {
-            console.log(values)
-          }}
-          className={classes.input}
-        />
+      <div {...getRootProps()} className={classes.board}>
+        <input {...getInputProps()} />
+        {R.isEmpty(data) && (
+          <div className={classes.box}>
+            <div className={classes.boxContent}>
+              <Info3>{message}</Info3>
+            </div>
+          </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>
     </>
   )
 }
diff --git a/new-lamassu-admin/src/pages/Customers/helper.js b/new-lamassu-admin/src/pages/Customers/helper.js
index 18357027..a5d776cc 100644
--- a/new-lamassu-admin/src/pages/Customers/helper.js
+++ b/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()
+  title: Yup.string().required(),
+  data: Yup.string().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: '' }
   }
 }
 

From c0204d0787d5860c81ca3c66e0f7e5099b461e0d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= <josepfo.w@gmail.com>
Date: Wed, 20 Oct 2021 22:52:52 +0100
Subject: [PATCH 08/12] fix: custom entries value

---
 new-lamassu-admin/src/pages/Customers/CustomerData.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/new-lamassu-admin/src/pages/Customers/CustomerData.js b/new-lamassu-admin/src/pages/Customers/CustomerData.js
index 838c53e2..a12c92bb 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerData.js
+++ b/new-lamassu-admin/src/pages/Customers/CustomerData.js
@@ -75,7 +75,7 @@ const CustomerData = ({ customer, updateCustomer }) => {
     ? 'Passed'
     : 'Failed'
 
-  const customEntries = [] // get customer custom entries
+  const customEntries = null // get customer custom entries
 
   const isEven = elem => elem % 2 === 0
 

From 111809b0cbbdd547ba5207edf05f08f42ebc4791 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= <josepfo.w@gmail.com>
Date: Fri, 22 Oct 2021 12:28:28 +0100
Subject: [PATCH 09/12] feat: add icons and get upload component up to spec

---
 .../pages/Customers/CustomerData.styles.js    |  2 +-
 .../src/pages/Customers/components/Upload.js  | 64 ++++++++++++++-----
 .../icons/button/photo/white-resized.svg      | 22 +++++++
 .../icons/button/photo/zodiac-resized.svg     | 20 ++++++
 .../styling/icons/button/replace/white.svg    | 16 +++++
 .../styling/icons/button/replace/zodiac.svg   | 16 +++++
 .../button/upload-file/white-resized.svg      | 21 ++++++
 .../icons/button/upload-file/white.svg        | 21 ++++++
 .../button/upload-file/zodiac-resized.svg     | 21 ++++++
 .../icons/button/upload-file/zodiac.svg       | 21 ++++++
 .../src/styling/icons/file/comet.svg          | 33 ++++++++++
 .../src/styling/icons/file/spring.svg         | 33 ++++++++++
 .../src/styling/icons/file/tomato.svg         | 33 ++++++++++
 13 files changed, 306 insertions(+), 17 deletions(-)
 create mode 100644 new-lamassu-admin/src/styling/icons/button/photo/white-resized.svg
 create mode 100644 new-lamassu-admin/src/styling/icons/button/photo/zodiac-resized.svg
 create mode 100644 new-lamassu-admin/src/styling/icons/button/replace/white.svg
 create mode 100644 new-lamassu-admin/src/styling/icons/button/replace/zodiac.svg
 create mode 100644 new-lamassu-admin/src/styling/icons/button/upload-file/white-resized.svg
 create mode 100644 new-lamassu-admin/src/styling/icons/button/upload-file/white.svg
 create mode 100644 new-lamassu-admin/src/styling/icons/button/upload-file/zodiac-resized.svg
 create mode 100644 new-lamassu-admin/src/styling/icons/button/upload-file/zodiac.svg
 create mode 100644 new-lamassu-admin/src/styling/icons/file/comet.svg
 create mode 100644 new-lamassu-admin/src/styling/icons/file/spring.svg
 create mode 100644 new-lamassu-admin/src/styling/icons/file/tomato.svg

diff --git a/new-lamassu-admin/src/pages/Customers/CustomerData.styles.js b/new-lamassu-admin/src/pages/Customers/CustomerData.styles.js
index d18ff46a..5977bbfe 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerData.styles.js
+++ b/new-lamassu-admin/src/pages/Customers/CustomerData.styles.js
@@ -24,7 +24,7 @@ export default {
   },
   separator: {
     display: 'flex',
-    flexBasis: '35%',
+    flexBasis: '100%',
     justifyContent: 'center',
     color: offColor,
     margin: [[8, 0, 8, 0]],
diff --git a/new-lamassu-admin/src/pages/Customers/components/Upload.js b/new-lamassu-admin/src/pages/Customers/components/Upload.js
index 4221df0f..38dac0d2 100644
--- a/new-lamassu-admin/src/pages/Customers/components/Upload.js
+++ b/new-lamassu-admin/src/pages/Customers/components/Upload.js
@@ -1,15 +1,18 @@
 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 { Label3, H3 } from 'src/components/typography'
+import { ReactComponent as UploadPhotoIcon } from 'src/styling/icons/button/photo/zodiac-resized.svg'
+import { ReactComponent as UploadFileIcon } from 'src/styling/icons/button/upload-file/zodiac-resized.svg'
 import { offColor, subheaderColor } from 'src/styling/variables'
 
 const useStyles = makeStyles({
   box: {
     boxSizing: 'border-box',
-    marginTop: 31,
+    marginTop: 40,
     width: 450,
     height: 120,
     borderStyle: 'dashed',
@@ -20,46 +23,75 @@ const useStyles = makeStyles({
     display: 'flex',
     justifyContent: 'center'
   },
-  boxContent: {
-    marginTop: 30
+  inputContent: {
+    marginTop: 35,
+    display: 'flex'
+  },
+  uploadContent: {
+    marginTop: 50,
+    display: 'flex'
   },
   board: {
     width: 450,
     height: 120
+  },
+  icon: {
+    margin: [[14, 20, 0, 0]]
   }
 })
 
 const Upload = ({ type }) => {
   const classes = useStyles()
-  const IMAGE = 'image'
 
   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 { setFieldValue } = useFormikContext()
 
-  const onDrop = useCallback(acceptedData => {
-    setData({ preview: URL.createObjectURL(R.head(acceptedData)) })
-  }, [])
+  const IMAGE = 'image'
+  const isImage = type === IMAGE
+
+  const onDrop = useCallback(
+    acceptedData => {
+      // TODO: attach the uploaded data to the form as well
+      setFieldValue(type, R.head(acceptedData).name)
+
+      setData({
+        preview: isImage
+          ? URL.createObjectURL(R.head(acceptedData))
+          : R.head(acceptedData).name
+      })
+    },
+    [isImage, type, setFieldValue]
+  )
 
   const { getRootProps, getInputProps } = useDropzone({ onDrop })
 
   return (
     <>
       <div {...getRootProps()} className={classes.board}>
-        <input {...getInputProps()} />
         {R.isEmpty(data) && (
           <div className={classes.box}>
-            <div className={classes.boxContent}>
-              <Info3>{message}</Info3>
+            <input {...getInputProps()} />
+            <div className={classes.inputContent}>
+              {isImage ? (
+                <UploadPhotoIcon className={classes.icon}></UploadPhotoIcon>
+              ) : (
+                <UploadFileIcon className={classes.icon}></UploadFileIcon>
+              )}
+              <Label3>{`Drag and drop ${
+                isImage ? 'an image' : 'a file'
+              } or click to open the explorer`}</Label3>
             </div>
           </div>
         )}
         {!R.isEmpty(data) && type === IMAGE && (
           <div key={data.name}>
-            <img src={data.preview} className={classes.box}></img>
+            <img src={data.preview} className={classes.box} alt=""></img>
+          </div>
+        )}
+        {!R.isEmpty(data) && type !== IMAGE && (
+          <div className={classes.box}>
+            <H3 className={classes.uploadContent}>{data.preview}</H3>
           </div>
         )}
       </div>
diff --git a/new-lamassu-admin/src/styling/icons/button/photo/white-resized.svg b/new-lamassu-admin/src/styling/icons/button/photo/white-resized.svg
new file mode 100644
index 00000000..aac48e3e
--- /dev/null
+++ b/new-lamassu-admin/src/styling/icons/button/photo/white-resized.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/photo/white-resized</title>
+    <g id="icon/button/photo/white-resized" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-3" transform="translate(-0.000000, 0.000000)">
+            <g id="Group-2" transform="translate(3.333333, 0.000000)" stroke="#FFFFFF">
+                <rect id="Rectangle-Copy" transform="translate(8.333333, 8.333333) scale(-1, 1) translate(-8.333333, -8.333333) " x="0.5" y="0.5" width="15.6666667" height="15.6666667" rx="1"></rect>
+                <circle id="Oval-Copy" fill="#FFFFFF" transform="translate(4.166667, 4.166667) scale(-1, 1) translate(-4.166667, -4.166667) " cx="4.16666667" cy="4.16666667" r="1"></circle>
+            </g>
+            <g id="Group" transform="translate(0.000000, 6.666667)">
+                <g id="Group-14" transform="translate(11.691221, 6.211306) scale(-1, 1) translate(-11.691221, -6.211306) translate(4.158064, 3.055556)" stroke="#FFFFFF" stroke-linejoin="round">
+                    <polyline id="Path-Copy-2" points="0 4.58204149 5.10673153 0 11.6154223 6.31150113"></polyline>
+                    <polyline id="Path" points="9.02830015 3.23981481 11.3158819 0.925925926 15.0663146 4.81868037"></polyline>
+                </g>
+                <g id="Group-9">
+                    <circle id="Oval" stroke="#FFFFFF" fill="#5F668A" cx="6.66666667" cy="6.66666667" r="6.16666667"></circle>
+                    <polygon id="Path" fill="#FFFFFF" fill-rule="nonzero" points="7.22222222 6.11111111 10 6.11111111 10 7.22222222 7.22222222 7.22222222 7.22222222 10 6.11111111 10 6.11111111 7.22222222 3.33333333 7.22222222 3.33333333 6.11111111 6.11111111 6.11111111 6.11111111 3.33333333 7.22222222 3.33333333"></polygon>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/new-lamassu-admin/src/styling/icons/button/photo/zodiac-resized.svg b/new-lamassu-admin/src/styling/icons/button/photo/zodiac-resized.svg
new file mode 100644
index 00000000..ef919c56
--- /dev/null
+++ b/new-lamassu-admin/src/styling/icons/button/photo/zodiac-resized.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/photo/zodiac-resized</title>
+    <g id="icon/button/photo/zodiac-resized" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Group-2">
+            <g id="Group" transform="translate(11.666667, 8.333333) scale(-1, 1) translate(-11.666667, -8.333333) translate(3.333333, 0.000000)" stroke="#1B2559">
+                <rect id="Rectangle-Copy" x="0.5" y="0.5" width="15.6666667" height="15.6666667" rx="1"></rect>
+                <circle id="Oval-Copy" fill="#1B2559" cx="12.5" cy="4.16666667" r="1"></circle>
+                <g id="Group-14" transform="translate(0.775621, 9.722222)" stroke-linejoin="round">
+                    <polyline id="Path-Copy-2" points="0 4.58204149 5.10673153 0 11.6154223 6.31150113"></polyline>
+                    <polyline id="Path" points="9.02830015 3.23981481 11.3158819 0.925925926 15.0663146 4.81868037"></polyline>
+                </g>
+            </g>
+            <g id="Group-9" transform="translate(0.000000, 6.666667)">
+                <circle id="Oval" stroke="#1B2559" fill="#EBEFFF" cx="6.66666667" cy="6.66666667" r="6.16666667"></circle>
+                <polygon id="Path" fill="#1B2559" fill-rule="nonzero" points="7.22222222 6.11111111 10 6.11111111 10 7.22222222 7.22222222 7.22222222 7.22222222 10 6.11111111 10 6.11111111 7.22222222 3.33333333 7.22222222 3.33333333 6.11111111 6.11111111 6.11111111 6.11111111 3.33333333 7.22222222 3.33333333"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/new-lamassu-admin/src/styling/icons/button/replace/white.svg b/new-lamassu-admin/src/styling/icons/button/replace/white.svg
new file mode 100644
index 00000000..ffdd826b
--- /dev/null
+++ b/new-lamassu-admin/src/styling/icons/button/replace/white.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/replace/white</title>
+    <g id="icon/button/replace/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Group-3" transform="translate(0.500000, 0.500000)" stroke="#FFFFFF">
+            <g id="Group-2">
+                <path d="M3.27636475,10.2264084 C2.67216087,9.96069246 2.10487152,9.58126145 1.60869691,9.087544 C-0.521488181,6.9675304 -0.538316861,3.54693703 1.57123953,1.44692357 C1.86137314,1.15837428 2.17625375,0.909794042 2.50930653,0.701182852" id="Stroke-1"></path>
+                <polyline id="Stroke-3" points="3.0943493 1.69429658 3.08837783 0.545717786 1.99994228 0"></polyline>
+            </g>
+            <g id="Group-2" transform="translate(8.999987, 5.500035) scale(-1, -1) translate(-8.999987, -5.500035) translate(6.999974, 0.000000)">
+                <path d="M3.27636475,10.2264084 C2.67216087,9.96069246 2.10487152,9.58126145 1.60869691,9.087544 C-0.521488181,6.9675304 -0.538316861,3.54693703 1.57123953,1.44692357 C1.86137314,1.15837428 2.17625375,0.909794042 2.50930653,0.701182852" id="Stroke-1"></path>
+                <polyline id="Stroke-3" points="3.0943493 1.69429658 3.08837783 0.545717786 1.99994228 3.80623901e-14"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/new-lamassu-admin/src/styling/icons/button/replace/zodiac.svg b/new-lamassu-admin/src/styling/icons/button/replace/zodiac.svg
new file mode 100644
index 00000000..07c20af3
--- /dev/null
+++ b/new-lamassu-admin/src/styling/icons/button/replace/zodiac.svg
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/replace/zodiac</title>
+    <g id="icon/button/replace/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
+        <g id="Group-3" transform="translate(0.500000, 0.500000)" stroke="#1B2559">
+            <g id="Group-2">
+                <path d="M3.27636475,10.2264084 C2.67216087,9.96069246 2.10487152,9.58126145 1.60869691,9.087544 C-0.521488181,6.9675304 -0.538316861,3.54693703 1.57123953,1.44692357 C1.86137314,1.15837428 2.17625375,0.909794042 2.50930653,0.701182852" id="Stroke-1"></path>
+                <polyline id="Stroke-3" points="3.0943493 1.69429658 3.08837783 0.545717786 1.99994228 3.80623901e-14"></polyline>
+            </g>
+            <g id="Group-2" transform="translate(8.999987, 5.500035) scale(-1, -1) translate(-8.999987, -5.500035) translate(6.999974, 0.000000)">
+                <path d="M3.27636475,10.2264084 C2.67216087,9.96069246 2.10487152,9.58126145 1.60869691,9.087544 C-0.521488181,6.9675304 -0.538316861,3.54693703 1.57123953,1.44692357 C1.86137314,1.15837428 2.17625375,0.909794042 2.50930653,0.701182852" id="Stroke-1"></path>
+                <polyline id="Stroke-3" points="3.0943493 1.69429658 3.08837783 0.545717786 1.99994228 3.80623901e-14"></polyline>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/new-lamassu-admin/src/styling/icons/button/upload-file/white-resized.svg b/new-lamassu-admin/src/styling/icons/button/upload-file/white-resized.svg
new file mode 100644
index 00000000..6f12177b
--- /dev/null
+++ b/new-lamassu-admin/src/styling/icons/button/upload-file/white-resized.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/upload-file/white-resized</title>
+    <g id="icon/button/upload-file/white-resized" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Add-File-Icon" transform="translate(0.000000, 0.500000)">
+            <g id="file-icon" transform="translate(5.934783, 0.000000)" stroke="#FFFFFF">
+                <g id="lines" transform="translate(3.130435, 7.826087)" stroke-linecap="round">
+                    <line x1="0" y1="7.04347826" x2="7.82608696" y2="7.04347826" id="line-3"></line>
+                    <line x1="0" y1="3.91304348" x2="7.82608696" y2="3.91304348" id="line-2"></line>
+                    <line x1="0" y1="0.782608696" x2="5.47826087" y2="0.782608696" id="line-1"></line>
+                </g>
+                <polygon id="paper" stroke-linecap="round" stroke-linejoin="round" points="13.5652174 18.6521739 0 18.6521739 -1.18243096e-12 0 8.47826087 2.91569667e-12 13.5652174 5.08695652"></polygon>
+                <polygon id="fold" stroke-linejoin="round" points="8.47826087 0 8.47826087 5.08695652 13.5652174 5.08695652"></polygon>
+            </g>
+            <g id="plus-sign" transform="translate(0.000000, 5.934783)">
+                <circle id="circle" stroke="#FFFFFF" fill="#5F668A" cx="6.7826087" cy="6.7826087" r="6.2826087"></circle>
+                <polygon id="plus" fill="#FFFFFF" fill-rule="nonzero" points="7.34782609 6.2173913 10.173913 6.2173913 10.173913 7.34782609 7.34782609 7.34782609 7.34782609 10.173913 6.2173913 10.173913 6.2173913 7.34782609 3.39130435 7.34782609 3.39130435 6.2173913 6.2173913 6.2173913 6.2173913 3.39130435 7.34782609 3.39130435"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/new-lamassu-admin/src/styling/icons/button/upload-file/white.svg b/new-lamassu-admin/src/styling/icons/button/upload-file/white.svg
new file mode 100644
index 00000000..bdf4c81d
--- /dev/null
+++ b/new-lamassu-admin/src/styling/icons/button/upload-file/white.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/upload-file/white</title>
+    <g id="icon/button/upload-file/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Add-File-Icon" transform="translate(0.000000, 0.500000)">
+            <g id="file-icon" transform="translate(3.500000, 0.000000)" stroke="#FFFFFF">
+                <g id="lines" transform="translate(1.846154, 4.615385)" stroke-linecap="round">
+                    <line x1="0" y1="4.15384615" x2="4.61538462" y2="4.15384615" id="line-3"></line>
+                    <line x1="0" y1="2.30769231" x2="4.61538462" y2="2.30769231" id="line-2"></line>
+                    <line x1="0" y1="0.461538462" x2="3.23076923" y2="0.461538462" id="line-1"></line>
+                </g>
+                <polygon id="paper" stroke-linecap="round" stroke-linejoin="round" points="8 11 0 11 -6.97331082e-13 0 5 1.71951342e-12 8 3"></polygon>
+                <polygon id="fold" stroke-linejoin="round" points="5 0 5 3 8 3"></polygon>
+            </g>
+            <g id="plus-sign" transform="translate(0.000000, 3.500000)">
+                <circle id="circle" stroke="#FFFFFF" fill="#5F668A" cx="4" cy="4" r="3.5"></circle>
+                <polygon id="plus" fill="#FFFFFF" fill-rule="nonzero" points="4.33333333 3.66666667 6 3.66666667 6 4.33333333 4.33333333 4.33333333 4.33333333 6 3.66666667 6 3.66666667 4.33333333 2 4.33333333 2 3.66666667 3.66666667 3.66666667 3.66666667 2 4.33333333 2"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/new-lamassu-admin/src/styling/icons/button/upload-file/zodiac-resized.svg b/new-lamassu-admin/src/styling/icons/button/upload-file/zodiac-resized.svg
new file mode 100644
index 00000000..97022d63
--- /dev/null
+++ b/new-lamassu-admin/src/styling/icons/button/upload-file/zodiac-resized.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/upload-file/zodiac-resized</title>
+    <g id="icon/button/upload-file/zodiac-resized" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Add-File-Icon" transform="translate(0.000000, 0.500000)">
+            <g id="file-icon" transform="translate(5.934783, 0.000000)" stroke="#1B2559">
+                <g id="lines" transform="translate(3.130435, 7.826087)" stroke-linecap="round">
+                    <line x1="0" y1="7.04347826" x2="7.82608696" y2="7.04347826" id="line-3"></line>
+                    <line x1="0" y1="3.91304348" x2="7.82608696" y2="3.91304348" id="line-2"></line>
+                    <line x1="0" y1="0.782608696" x2="5.47826087" y2="0.782608696" id="line-1"></line>
+                </g>
+                <polygon id="paper" stroke-linecap="round" stroke-linejoin="round" points="13.5652174 18.6521739 0 18.6521739 -1.18243096e-12 0 8.47826087 2.91569667e-12 13.5652174 5.08695652"></polygon>
+                <polygon id="fold" stroke-linejoin="round" points="8.47826087 0 8.47826087 5.08695652 13.5652174 5.08695652"></polygon>
+            </g>
+            <g id="plus-sign" transform="translate(0.000000, 5.934783)">
+                <circle id="Oval" stroke="#1B2559" fill="#EBEFFF" cx="6.7826087" cy="6.7826087" r="6.2826087"></circle>
+                <polygon id="Path" fill="#1B2559" fill-rule="nonzero" points="7.34782609 6.2173913 10.173913 6.2173913 10.173913 7.34782609 7.34782609 7.34782609 7.34782609 10.173913 6.2173913 10.173913 6.2173913 7.34782609 3.39130435 7.34782609 3.39130435 6.2173913 6.2173913 6.2173913 6.2173913 3.39130435 7.34782609 3.39130435"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/new-lamassu-admin/src/styling/icons/button/upload-file/zodiac.svg b/new-lamassu-admin/src/styling/icons/button/upload-file/zodiac.svg
new file mode 100644
index 00000000..4d091e39
--- /dev/null
+++ b/new-lamassu-admin/src/styling/icons/button/upload-file/zodiac.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/button/upload-file/zodiac</title>
+    <g id="icon/button/upload-file/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Add-File-Icon" transform="translate(0.000000, 0.500000)">
+            <g id="file-icon" transform="translate(3.500000, 0.000000)" stroke="#1B2559">
+                <g id="lines" transform="translate(1.846154, 4.615385)" stroke-linecap="round">
+                    <line x1="0" y1="4.15384615" x2="4.61538462" y2="4.15384615" id="line-3"></line>
+                    <line x1="0" y1="2.30769231" x2="4.61538462" y2="2.30769231" id="line-2"></line>
+                    <line x1="0" y1="0.461538462" x2="3.23076923" y2="0.461538462" id="line-1"></line>
+                </g>
+                <polygon id="paper" stroke-linecap="round" stroke-linejoin="round" points="8 11 0 11 -6.97331082e-13 0 5 1.71951342e-12 8 3"></polygon>
+                <polygon id="fold" stroke-linejoin="round" points="5 0 5 3 8 3"></polygon>
+            </g>
+            <g id="plus-sign" transform="translate(0.000000, 3.500000)">
+                <circle id="Oval" stroke="#1B2559" fill="#EBEFFF" cx="4" cy="4" r="3.5"></circle>
+                <polygon id="Path" fill="#1B2559" fill-rule="nonzero" points="4.33333333 3.66666667 6 3.66666667 6 4.33333333 4.33333333 4.33333333 4.33333333 6 3.66666667 6 3.66666667 4.33333333 2 4.33333333 2 3.66666667 3.66666667 3.66666667 3.66666667 2 4.33333333 2"></polygon>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/new-lamassu-admin/src/styling/icons/file/comet.svg b/new-lamassu-admin/src/styling/icons/file/comet.svg
new file mode 100644
index 00000000..231d341b
--- /dev/null
+++ b/new-lamassu-admin/src/styling/icons/file/comet.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="44px" viewBox="0 0 32 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/file/zip/comet</title>
+    <g id="icon/file/zip/comet" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="file-icon">
+            <path d="M22.0376317,0.5 C22.8639351,0.5 23.6635926,0.792348435 24.2950546,1.32529592 L24.2950546,1.32529592 L30.2574229,6.35747377 C31.045369,7.02249225 31.5,8.00110623 31.5,9.03217785 L31.5,9.03217785 L31.5,40 C31.5,40.9664983 31.1082492,41.8414983 30.4748737,42.4748737 C29.8414983,43.1082492 28.9664983,43.5 28,43.5 L28,43.5 L4,43.5 C3.03350169,43.5 2.15850169,43.1082492 1.52512627,42.4748737 C0.891750844,41.8414983 0.5,40.9664983 0.5,40 L0.5,40 L0.5,4 C0.5,3.03350169 0.891750844,2.15850169 1.52512627,1.52512627 C2.15850169,0.891750844 3.03350169,0.5 4,0.5 L4,0.5 Z" id="Rectangle" stroke="#5F668A" fill="#FFFFFF"></path>
+            <path d="M22,0 L22,5 C22,7.209139 23.790861,9 26,9 L32,9 L32,9" id="Path" stroke="#5F668A"></path>
+            <g id="rects" transform="translate(6.000000, 0.000000)" fill="#5F668A">
+                <rect id="file-icon-rect21" x="0" y="41.4505495" width="2" height="2"></rect>
+                <rect id="file-icon-rect20" x="2" y="39.4285714" width="2" height="2"></rect>
+                <rect id="file-icon-rect19" x="0" y="37.4065934" width="2" height="2"></rect>
+                <rect id="file-icon-rect18" x="2" y="35.3846154" width="2" height="2"></rect>
+                <rect id="file-icon-rect17" x="0" y="32.8571429" width="2" height="2"></rect>
+                <rect id="file-icon-rect16" x="2" y="30.8351648" width="2" height="2"></rect>
+                <rect id="file-icon-rect15" x="0" y="28.8131868" width="2" height="2"></rect>
+                <rect id="file-icon-rect14" x="2" y="26.7912088" width="2" height="2"></rect>
+                <rect id="file-icon-rect13" x="0" y="24.2637363" width="2" height="2"></rect>
+                <rect id="file-icon-rect12" x="2" y="22.2417582" width="2" height="2"></rect>
+                <rect id="file-icon-rect11" x="0" y="20.2197802" width="2" height="2"></rect>
+                <rect id="file-icon-rect10" x="2" y="18.1978022" width="2" height="2"></rect>
+                <rect id="file-icon-rect9" x="0" y="16.1758242" width="2" height="2"></rect>
+                <rect id="file-icon-rect8" x="2" y="14.1538462" width="2" height="2"></rect>
+                <rect id="file-icon-rect7" x="0" y="12.1318681" width="2" height="2"></rect>
+                <rect id="file-icon-rect6" x="2" y="10.1098901" width="2" height="2"></rect>
+                <rect id="file-icon-rect5" x="0" y="8.08791209" width="2" height="2"></rect>
+                <rect id="file-icon-rect4" x="2" y="6.06593407" width="2" height="2"></rect>
+                <rect id="file-icon-rect3" x="0" y="4.04395604" width="2" height="2"></rect>
+                <rect id="file-icon-rect2" x="2" y="2.02197802" width="2" height="2"></rect>
+                <rect id="file-icon-rect1" x="0" y="0" width="2" height="2"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/new-lamassu-admin/src/styling/icons/file/spring.svg b/new-lamassu-admin/src/styling/icons/file/spring.svg
new file mode 100644
index 00000000..d8650af5
--- /dev/null
+++ b/new-lamassu-admin/src/styling/icons/file/spring.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="44px" viewBox="0 0 32 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/file/zip/spring</title>
+    <g id="icon/file/zip/spring" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="file-icon">
+            <path d="M22.0376317,0.5 C22.8639351,0.5 23.6635926,0.792348435 24.2950546,1.32529592 L24.2950546,1.32529592 L30.2574229,6.35747377 C31.045369,7.02249225 31.5,8.00110623 31.5,9.03217785 L31.5,9.03217785 L31.5,40 C31.5,40.9664983 31.1082492,41.8414983 30.4748737,42.4748737 C29.8414983,43.1082492 28.9664983,43.5 28,43.5 L28,43.5 L4,43.5 C3.03350169,43.5 2.15850169,43.1082492 1.52512627,42.4748737 C0.891750844,41.8414983 0.5,40.9664983 0.5,40 L0.5,40 L0.5,4 C0.5,3.03350169 0.891750844,2.15850169 1.52512627,1.52512627 C2.15850169,0.891750844 3.03350169,0.5 4,0.5 L4,0.5 Z" id="Rectangle" stroke="#48F694" fill="#FFFFFF"></path>
+            <path d="M22,0 L22,5 C22,7.209139 23.790861,9 26,9 L32,9 L32,9" id="Path" stroke="#48F694"></path>
+            <g id="rects" transform="translate(6.000000, 0.000000)" fill="#48F694">
+                <rect id="file-icon-rect21" x="0" y="41.4505495" width="2" height="2"></rect>
+                <rect id="file-icon-rect20" x="2" y="39.4285714" width="2" height="2"></rect>
+                <rect id="file-icon-rect19" x="0" y="37.4065934" width="2" height="2"></rect>
+                <rect id="file-icon-rect18" x="2" y="35.3846154" width="2" height="2"></rect>
+                <rect id="file-icon-rect17" x="0" y="32.8571429" width="2" height="2"></rect>
+                <rect id="file-icon-rect16" x="2" y="30.8351648" width="2" height="2"></rect>
+                <rect id="file-icon-rect15" x="0" y="28.8131868" width="2" height="2"></rect>
+                <rect id="file-icon-rect14" x="2" y="26.7912088" width="2" height="2"></rect>
+                <rect id="file-icon-rect13" x="0" y="24.2637363" width="2" height="2"></rect>
+                <rect id="file-icon-rect12" x="2" y="22.2417582" width="2" height="2"></rect>
+                <rect id="file-icon-rect11" x="0" y="20.2197802" width="2" height="2"></rect>
+                <rect id="file-icon-rect10" x="2" y="18.1978022" width="2" height="2"></rect>
+                <rect id="file-icon-rect9" x="0" y="16.1758242" width="2" height="2"></rect>
+                <rect id="file-icon-rect8" x="2" y="14.1538462" width="2" height="2"></rect>
+                <rect id="file-icon-rect7" x="0" y="12.1318681" width="2" height="2"></rect>
+                <rect id="file-icon-rect6" x="2" y="10.1098901" width="2" height="2"></rect>
+                <rect id="file-icon-rect5" x="0" y="8.08791209" width="2" height="2"></rect>
+                <rect id="file-icon-rect4" x="2" y="6.06593407" width="2" height="2"></rect>
+                <rect id="file-icon-rect3" x="0" y="4.04395604" width="2" height="2"></rect>
+                <rect id="file-icon-rect2" x="2" y="2.02197802" width="2" height="2"></rect>
+                <rect id="file-icon-rect1" x="0" y="0" width="2" height="2"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/new-lamassu-admin/src/styling/icons/file/tomato.svg b/new-lamassu-admin/src/styling/icons/file/tomato.svg
new file mode 100644
index 00000000..0a7733b0
--- /dev/null
+++ b/new-lamassu-admin/src/styling/icons/file/tomato.svg
@@ -0,0 +1,33 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="44px" viewBox="0 0 32 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/file/zip/tomato</title>
+    <g id="icon/file/zip/tomato" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="file-icon">
+            <path d="M22.0376317,0.5 C22.8639351,0.5 23.6635926,0.792348435 24.2950546,1.32529592 L24.2950546,1.32529592 L30.2574229,6.35747377 C31.045369,7.02249225 31.5,8.00110623 31.5,9.03217785 L31.5,9.03217785 L31.5,40 C31.5,40.9664983 31.1082492,41.8414983 30.4748737,42.4748737 C29.8414983,43.1082492 28.9664983,43.5 28,43.5 L28,43.5 L4,43.5 C3.03350169,43.5 2.15850169,43.1082492 1.52512627,42.4748737 C0.891750844,41.8414983 0.5,40.9664983 0.5,40 L0.5,40 L0.5,4 C0.5,3.03350169 0.891750844,2.15850169 1.52512627,1.52512627 C2.15850169,0.891750844 3.03350169,0.5 4,0.5 L4,0.5 Z" id="Rectangle" stroke="#FF584A" fill="#FFFFFF"></path>
+            <path d="M22,0 L22,5 C22,7.209139 23.790861,9 26,9 L32,9 L32,9" id="Path" stroke="#FF584A"></path>
+            <g id="rects" transform="translate(6.000000, 0.000000)" fill="#FF584A">
+                <rect id="file-icon-rect21" x="0" y="41.4505495" width="2" height="2"></rect>
+                <rect id="file-icon-rect20" x="2" y="39.4285714" width="2" height="2"></rect>
+                <rect id="file-icon-rect19" x="0" y="37.4065934" width="2" height="2"></rect>
+                <rect id="file-icon-rect18" x="2" y="35.3846154" width="2" height="2"></rect>
+                <rect id="file-icon-rect17" x="0" y="32.8571429" width="2" height="2"></rect>
+                <rect id="file-icon-rect16" x="2" y="30.8351648" width="2" height="2"></rect>
+                <rect id="file-icon-rect15" x="0" y="28.8131868" width="2" height="2"></rect>
+                <rect id="file-icon-rect14" x="2" y="26.7912088" width="2" height="2"></rect>
+                <rect id="file-icon-rect13" x="0" y="24.2637363" width="2" height="2"></rect>
+                <rect id="file-icon-rect12" x="2" y="22.2417582" width="2" height="2"></rect>
+                <rect id="file-icon-rect11" x="0" y="20.2197802" width="2" height="2"></rect>
+                <rect id="file-icon-rect10" x="2" y="18.1978022" width="2" height="2"></rect>
+                <rect id="file-icon-rect9" x="0" y="16.1758242" width="2" height="2"></rect>
+                <rect id="file-icon-rect8" x="2" y="14.1538462" width="2" height="2"></rect>
+                <rect id="file-icon-rect7" x="0" y="12.1318681" width="2" height="2"></rect>
+                <rect id="file-icon-rect6" x="2" y="10.1098901" width="2" height="2"></rect>
+                <rect id="file-icon-rect5" x="0" y="8.08791209" width="2" height="2"></rect>
+                <rect id="file-icon-rect4" x="2" y="6.06593407" width="2" height="2"></rect>
+                <rect id="file-icon-rect3" x="0" y="4.04395604" width="2" height="2"></rect>
+                <rect id="file-icon-rect2" x="2" y="2.02197802" width="2" height="2"></rect>
+                <rect id="file-icon-rect1" x="0" y="0" width="2" height="2"></rect>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file

From 7eb10f1515a4bac25f560c53ab6dbe5bc4302516 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= <josepfo.w@gmail.com>
Date: Thu, 28 Oct 2021 01:02:34 +0100
Subject: [PATCH 10/12] fix: css syntax, remove useless component and the title
 tag on svgs

---
 .../src/pages/Customers/CustomerData.js       | 18 +++++++++---------
 .../src/pages/Customers/Wizard.js             | 19 +++----------------
 .../components/CustomerSidebar.styles.js      |  4 ++--
 .../src/styling/icons/action/edit/comet.svg   |  1 -
 .../src/styling/icons/button/data/white.svg   |  1 -
 .../src/styling/icons/button/data/zodiac.svg  |  1 -
 .../styling/icons/button/discount/comet.svg   |  1 -
 .../styling/icons/button/discount/white.svg   |  1 -
 .../styling/icons/button/discount/zodiac.svg  |  1 -
 .../icons/button/photo/white-resized.svg      |  1 -
 .../icons/button/photo/zodiac-resized.svg     |  1 -
 .../styling/icons/button/replace/white.svg    |  1 -
 .../styling/icons/button/replace/zodiac.svg   |  1 -
 .../button/upload-file/white-resized.svg      |  1 -
 .../icons/button/upload-file/white.svg        |  1 -
 .../button/upload-file/zodiac-resized.svg     |  1 -
 .../icons/button/upload-file/zodiac.svg       |  1 -
 .../customer-list-view/white.svg              |  1 -
 .../customer-list-view/zodiac.svg             |  1 -
 .../icons/circle buttons/overview/comet.svg   |  1 -
 .../icons/circle buttons/overview/white.svg   |  1 -
 .../icons/circle buttons/overview/zodiac.svg  |  1 -
 .../styling/icons/customer-nav/data/comet.svg |  1 -
 .../styling/icons/customer-nav/data/white.svg |  1 -
 .../icons/customer-nav/data/zodiac.svg        |  1 -
 .../icons/customer-nav/overview/comet.svg     |  1 -
 .../icons/customer-nav/overview/white.svg     |  1 -
 .../icons/customer-nav/overview/zodiac.svg    |  1 -
 .../src/styling/icons/file/comet.svg          |  1 -
 .../src/styling/icons/file/spring.svg         |  1 -
 .../src/styling/icons/file/tomato.svg         |  1 -
 31 files changed, 14 insertions(+), 55 deletions(-)

diff --git a/new-lamassu-admin/src/pages/Customers/CustomerData.js b/new-lamassu-admin/src/pages/Customers/CustomerData.js
index a12c92bb..7cd7d501 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerData.js
+++ b/new-lamassu-admin/src/pages/Customers/CustomerData.js
@@ -31,23 +31,23 @@ import { getName } from './helper.js'
 
 const useStyles = makeStyles(styles)
 
-const imageWidth = 165
-const imageHeight = 45
-const popupImageWidth = 360
-const popupImageHeight = 240
+const IMAGE_WIDTH = 165
+const IMAGE_HEIGHT = 45
+const POPUP_IMAGE_WIDTH = 360
+const POPUP_IMAGE_HEIGHT = 240
 
 const Photo = ({ show, src }) => {
-  const classes = useStyles({ width: imageWidth })
+  const classes = useStyles({ width: IMAGE_WIDTH })
 
   return (
     <>
       {show ? (
         <ImagePopper
           src={src}
-          width={imageWidth}
-          height={imageHeight}
-          popupWidth={popupImageWidth}
-          popupHeight={popupImageHeight}
+          width={IMAGE_WIDTH}
+          height={IMAGE_HEIGHT}
+          popupWidth={POPUP_IMAGE_WIDTH}
+          popupHeight={POPUP_IMAGE_HEIGHT}
         />
       ) : (
         <div className={classes.photoWrapper}>
diff --git a/new-lamassu-admin/src/pages/Customers/Wizard.js b/new-lamassu-admin/src/pages/Customers/Wizard.js
index bc1652ec..87bebaa8 100644
--- a/new-lamassu-admin/src/pages/Customers/Wizard.js
+++ b/new-lamassu-admin/src/pages/Customers/Wizard.js
@@ -1,7 +1,7 @@
 import { makeStyles } from '@material-ui/core'
-import { Form, Formik, useFormikContext } from 'formik'
+import { Form, Formik } from 'formik'
 import * as R from 'ramda'
-import React, { useState, Fragment, useEffect } from 'react'
+import React, { useState, Fragment } from 'react'
 
 import ErrorMessage from 'src/components/ErrorMessage'
 import Modal from 'src/components/Modal'
@@ -57,29 +57,17 @@ const getStep = (step, selectedValues) => {
   }
 }
 
-const GetValues = ({ setValues }) => {
-  const { values } = useFormikContext()
-
-  useEffect(() => {
-    setValues && values && setValues(values)
-  }, [setValues, values])
-
-  return null
-}
-
 const Wizard = ({ onClose, save, error }) => {
   const classes = useStyles()
 
   const [selectedValues, setSelectedValues] = useState(null)
-  const [liveValues, setLiveValues] = useState({})
 
   const [{ step, config }, setState] = useState({
     step: 1
   })
 
-  // TODO forms error handling
   const isLastStep = step === LAST_STEP
-  const stepOptions = getStep(step, selectedValues, liveValues)
+  const stepOptions = getStep(step, selectedValues)
 
   const onContinue = async it => {
     const newConfig = R.merge(config, stepOptions.schema.cast(it))
@@ -116,7 +104,6 @@ const Wizard = ({ onClose, save, error }) => {
           initialValues={stepOptions.initialValues}
           validationSchema={stepOptions.schema}>
           <Form className={classes.form}>
-            <GetValues setValues={setLiveValues} />
             <stepOptions.Component
               selectedValues={selectedValues}
               {...stepOptions.props}
diff --git a/new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.styles.js b/new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.styles.js
index f40f871a..2d967f3d 100644
--- a/new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.styles.js
+++ b/new-lamassu-admin/src/pages/Customers/components/CustomerSidebar.styles.js
@@ -30,10 +30,10 @@ export default {
     color: white,
     backgroundColor: offDarkColor,
     '&:first-child': {
-      borderRadius: '5px 5px 0px 0px'
+      borderRadius: [5, 5, 0, 0]
     },
     '&:last-child': {
-      borderRadius: '0px 0px 5px 5px'
+      borderRadius: [0, 0, 5, 5]
     }
   },
   icon: {
diff --git a/new-lamassu-admin/src/styling/icons/action/edit/comet.svg b/new-lamassu-admin/src/styling/icons/action/edit/comet.svg
index 8b77414e..10c785d1 100644
--- a/new-lamassu-admin/src/styling/icons/action/edit/comet.svg
+++ b/new-lamassu-admin/src/styling/icons/action/edit/comet.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="22px" height="22px" viewBox="0 0 22 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
     <desc>Created with Sketch.</desc>
     <g id="icon/action/edit/disabled" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
         <path d="M1,18 L1,18 C1,19.657 2.343,21 4,21 L18,21 C19.657,21 21,19.657 21,18" id="Stroke-1" stroke="#5f668a" stroke-width="2"></path>
diff --git a/new-lamassu-admin/src/styling/icons/button/data/white.svg b/new-lamassu-admin/src/styling/icons/button/data/white.svg
index d6410eb2..4e50be4f 100644
--- a/new-lamassu-admin/src/styling/icons/button/data/white.svg
+++ b/new-lamassu-admin/src/styling/icons/button/data/white.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/button/data/white</title>
     <g id="icon/button/data/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Data-icon---small" transform="translate(0.500000, 0.500000)" stroke="#FFFFFF">
             <path d="M11,2.44444444 L11,5.5 C11,6.85002939 8.53756612,7.94444444 5.5,7.94444444 C2.521994,7.94444444 0.0939612041,6.81341452 1.11160464e-12,5.5 L0.00282594991,2.44444444" id="oval-3"></path>
diff --git a/new-lamassu-admin/src/styling/icons/button/data/zodiac.svg b/new-lamassu-admin/src/styling/icons/button/data/zodiac.svg
index ec78d0d6..66e0049c 100644
--- a/new-lamassu-admin/src/styling/icons/button/data/zodiac.svg
+++ b/new-lamassu-admin/src/styling/icons/button/data/zodiac.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/button/data/zodiac</title>
     <g id="icon/button/data/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Data-icon---small" transform="translate(1.500000, 0.500000)" stroke="#1B2559">
             <path d="M10,2 L10,4.77777778 C10,6.00507722 7.76142375,7 5,7 C2.29272181,7 0.0854192765,5.97179097 0,4.77777778 L0.00256904537,2" id="oval-3"></path>
diff --git a/new-lamassu-admin/src/styling/icons/button/discount/comet.svg b/new-lamassu-admin/src/styling/icons/button/discount/comet.svg
index ac2ab03c..4ad0de56 100644
--- a/new-lamassu-admin/src/styling/icons/button/discount/comet.svg
+++ b/new-lamassu-admin/src/styling/icons/button/discount/comet.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/button/loyalty/comet</title>
     <g id="icon/button/loyalty/comet" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <polygon id="Stroke-2" stroke="#5f668a" stroke-linejoin="round" points="8.27822222 0.5 3.72177778 0.5 0.5 3.72177778 0.5 8.27822222 3.72177778 11.5 8.27822222 11.5 11.5 8.27822222 11.5 3.72177778"></polygon>
         <path d="M7.55533889,6.66641667 C8.04667222,6.66641667 8.44450556,7.06486111 8.44450556,7.55558333 C8.44450556,8.04630556 8.04667222,8.44475 7.55533889,8.44475 C7.06461667,8.44475 6.66678333,8.04630556 6.66678333,7.55558333 C6.66678333,7.06486111 7.06461667,6.66641667 7.55533889,6.66641667 Z M8.44481111,3.55555556 L4.44447778,8.44444444 L3.55592222,8.44444444 L7.55564444,3.55555556 L8.44481111,3.55555556 Z M4.44423333,3.55525 C4.93556667,3.55525 5.3334,3.95369444 5.3334,4.44441667 C5.3334,4.93513889 4.93556667,5.33358333 4.44423333,5.33358333 C3.95351111,5.33358333 3.55567778,4.93513889 3.55567778,4.44441667 C3.55567778,3.95369444 3.95351111,3.55525 4.44423333,3.55525 Z" id="Combined-Shape" fill="#5f668a"></path>
diff --git a/new-lamassu-admin/src/styling/icons/button/discount/white.svg b/new-lamassu-admin/src/styling/icons/button/discount/white.svg
index 538dc4f6..56d5d8ad 100644
--- a/new-lamassu-admin/src/styling/icons/button/discount/white.svg
+++ b/new-lamassu-admin/src/styling/icons/button/discount/white.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/button/loyalty/white</title>
     <g id="icon/button/loyalty/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <polygon id="Stroke-2" stroke="#FFFFFF" stroke-linejoin="round" points="8.27822222 0.5 3.72177778 0.5 0.5 3.72177778 0.5 8.27822222 3.72177778 11.5 8.27822222 11.5 11.5 8.27822222 11.5 3.72177778"></polygon>
         <path d="M7.55533889,6.66641667 C8.04667222,6.66641667 8.44450556,7.06486111 8.44450556,7.55558333 C8.44450556,8.04630556 8.04667222,8.44475 7.55533889,8.44475 C7.06461667,8.44475 6.66678333,8.04630556 6.66678333,7.55558333 C6.66678333,7.06486111 7.06461667,6.66641667 7.55533889,6.66641667 Z M8.44481111,3.55555556 L4.44447778,8.44444444 L3.55592222,8.44444444 L7.55564444,3.55555556 L8.44481111,3.55555556 Z M4.44423333,3.55525 C4.93556667,3.55525 5.3334,3.95369444 5.3334,4.44441667 C5.3334,4.93513889 4.93556667,5.33358333 4.44423333,5.33358333 C3.95351111,5.33358333 3.55567778,4.93513889 3.55567778,4.44441667 C3.55567778,3.95369444 3.95351111,3.55525 4.44423333,3.55525 Z" id="Combined-Shape" fill="#FFFFFF"></path>
diff --git a/new-lamassu-admin/src/styling/icons/button/discount/zodiac.svg b/new-lamassu-admin/src/styling/icons/button/discount/zodiac.svg
index e7a46dc3..15d095d6 100644
--- a/new-lamassu-admin/src/styling/icons/button/discount/zodiac.svg
+++ b/new-lamassu-admin/src/styling/icons/button/discount/zodiac.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/button/loyalty/zodiac</title>
     <g id="icon/button/loyalty/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <polygon id="Stroke-2" stroke="#1B2559" stroke-linejoin="round" points="8.27822222 0.5 3.72177778 0.5 0.5 3.72177778 0.5 8.27822222 3.72177778 11.5 8.27822222 11.5 11.5 8.27822222 11.5 3.72177778"></polygon>
         <path d="M7.55533889,6.66641667 C8.04667222,6.66641667 8.44450556,7.06486111 8.44450556,7.55558333 C8.44450556,8.04630556 8.04667222,8.44475 7.55533889,8.44475 C7.06461667,8.44475 6.66678333,8.04630556 6.66678333,7.55558333 C6.66678333,7.06486111 7.06461667,6.66641667 7.55533889,6.66641667 Z M8.44481111,3.55555556 L4.44447778,8.44444444 L3.55592222,8.44444444 L7.55564444,3.55555556 L8.44481111,3.55555556 Z M4.44423333,3.55525 C4.93556667,3.55525 5.3334,3.95369444 5.3334,4.44441667 C5.3334,4.93513889 4.93556667,5.33358333 4.44423333,5.33358333 C3.95351111,5.33358333 3.55567778,4.93513889 3.55567778,4.44441667 C3.55567778,3.95369444 3.95351111,3.55525 4.44423333,3.55525 Z" id="Combined-Shape" fill="#1B2559"></path>
diff --git a/new-lamassu-admin/src/styling/icons/button/photo/white-resized.svg b/new-lamassu-admin/src/styling/icons/button/photo/white-resized.svg
index aac48e3e..fc199166 100644
--- a/new-lamassu-admin/src/styling/icons/button/photo/white-resized.svg
+++ b/new-lamassu-admin/src/styling/icons/button/photo/white-resized.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/button/photo/white-resized</title>
     <g id="icon/button/photo/white-resized" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Group-3" transform="translate(-0.000000, 0.000000)">
             <g id="Group-2" transform="translate(3.333333, 0.000000)" stroke="#FFFFFF">
diff --git a/new-lamassu-admin/src/styling/icons/button/photo/zodiac-resized.svg b/new-lamassu-admin/src/styling/icons/button/photo/zodiac-resized.svg
index ef919c56..1065bc1f 100644
--- a/new-lamassu-admin/src/styling/icons/button/photo/zodiac-resized.svg
+++ b/new-lamassu-admin/src/styling/icons/button/photo/zodiac-resized.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/button/photo/zodiac-resized</title>
     <g id="icon/button/photo/zodiac-resized" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Group-2">
             <g id="Group" transform="translate(11.666667, 8.333333) scale(-1, 1) translate(-11.666667, -8.333333) translate(3.333333, 0.000000)" stroke="#1B2559">
diff --git a/new-lamassu-admin/src/styling/icons/button/replace/white.svg b/new-lamassu-admin/src/styling/icons/button/replace/white.svg
index ffdd826b..dd3d3f3c 100644
--- a/new-lamassu-admin/src/styling/icons/button/replace/white.svg
+++ b/new-lamassu-admin/src/styling/icons/button/replace/white.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/button/replace/white</title>
     <g id="icon/button/replace/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
         <g id="Group-3" transform="translate(0.500000, 0.500000)" stroke="#FFFFFF">
             <g id="Group-2">
diff --git a/new-lamassu-admin/src/styling/icons/button/replace/zodiac.svg b/new-lamassu-admin/src/styling/icons/button/replace/zodiac.svg
index 07c20af3..65d17fb1 100644
--- a/new-lamassu-admin/src/styling/icons/button/replace/zodiac.svg
+++ b/new-lamassu-admin/src/styling/icons/button/replace/zodiac.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/button/replace/zodiac</title>
     <g id="icon/button/replace/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
         <g id="Group-3" transform="translate(0.500000, 0.500000)" stroke="#1B2559">
             <g id="Group-2">
diff --git a/new-lamassu-admin/src/styling/icons/button/upload-file/white-resized.svg b/new-lamassu-admin/src/styling/icons/button/upload-file/white-resized.svg
index 6f12177b..63e43664 100644
--- a/new-lamassu-admin/src/styling/icons/button/upload-file/white-resized.svg
+++ b/new-lamassu-admin/src/styling/icons/button/upload-file/white-resized.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/button/upload-file/white-resized</title>
     <g id="icon/button/upload-file/white-resized" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Add-File-Icon" transform="translate(0.000000, 0.500000)">
             <g id="file-icon" transform="translate(5.934783, 0.000000)" stroke="#FFFFFF">
diff --git a/new-lamassu-admin/src/styling/icons/button/upload-file/white.svg b/new-lamassu-admin/src/styling/icons/button/upload-file/white.svg
index bdf4c81d..c59dca65 100644
--- a/new-lamassu-admin/src/styling/icons/button/upload-file/white.svg
+++ b/new-lamassu-admin/src/styling/icons/button/upload-file/white.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/button/upload-file/white</title>
     <g id="icon/button/upload-file/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Add-File-Icon" transform="translate(0.000000, 0.500000)">
             <g id="file-icon" transform="translate(3.500000, 0.000000)" stroke="#FFFFFF">
diff --git a/new-lamassu-admin/src/styling/icons/button/upload-file/zodiac-resized.svg b/new-lamassu-admin/src/styling/icons/button/upload-file/zodiac-resized.svg
index 97022d63..5d7e61f1 100644
--- a/new-lamassu-admin/src/styling/icons/button/upload-file/zodiac-resized.svg
+++ b/new-lamassu-admin/src/styling/icons/button/upload-file/zodiac-resized.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/button/upload-file/zodiac-resized</title>
     <g id="icon/button/upload-file/zodiac-resized" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Add-File-Icon" transform="translate(0.000000, 0.500000)">
             <g id="file-icon" transform="translate(5.934783, 0.000000)" stroke="#1B2559">
diff --git a/new-lamassu-admin/src/styling/icons/button/upload-file/zodiac.svg b/new-lamassu-admin/src/styling/icons/button/upload-file/zodiac.svg
index 4d091e39..26bab67b 100644
--- a/new-lamassu-admin/src/styling/icons/button/upload-file/zodiac.svg
+++ b/new-lamassu-admin/src/styling/icons/button/upload-file/zodiac.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/button/upload-file/zodiac</title>
     <g id="icon/button/upload-file/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="Add-File-Icon" transform="translate(0.000000, 0.500000)">
             <g id="file-icon" transform="translate(3.500000, 0.000000)" stroke="#1B2559">
diff --git a/new-lamassu-admin/src/styling/icons/circle buttons/customer-list-view/white.svg b/new-lamassu-admin/src/styling/icons/circle buttons/customer-list-view/white.svg
index f9188caa..c610ebf5 100644
--- a/new-lamassu-admin/src/styling/icons/circle buttons/customer-list-view/white.svg	
+++ b/new-lamassu-admin/src/styling/icons/circle buttons/customer-list-view/white.svg	
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/sf-small/listing/white</title>
     <g id="icon/sf-small/listing/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
         <line x1="1" y1="1" x2="19.0952381" y2="1" id="Path-4" stroke="#FFFFFF" stroke-width="2"></line>
         <line x1="1" y1="7" x2="19.0952381" y2="7" id="Path-4-Copy" stroke="#FFFFFF" stroke-width="2"></line>
diff --git a/new-lamassu-admin/src/styling/icons/circle buttons/customer-list-view/zodiac.svg b/new-lamassu-admin/src/styling/icons/circle buttons/customer-list-view/zodiac.svg
index b8aa5902..6e07620e 100644
--- a/new-lamassu-admin/src/styling/icons/circle buttons/customer-list-view/zodiac.svg	
+++ b/new-lamassu-admin/src/styling/icons/circle buttons/customer-list-view/zodiac.svg	
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/sf-small/listing/zodiac</title>
     <g id="icon/sf-small/listing/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round">
         <line x1="1" y1="1" x2="19.0952381" y2="1" id="Path-4" stroke="#1B2559" stroke-width="2"></line>
         <line x1="1" y1="7" x2="19.0952381" y2="7" id="Path-4-Copy" stroke="#1B2559" stroke-width="2"></line>
diff --git a/new-lamassu-admin/src/styling/icons/circle buttons/overview/comet.svg b/new-lamassu-admin/src/styling/icons/circle buttons/overview/comet.svg
index 46a0342c..2ab2ffd7 100644
--- a/new-lamassu-admin/src/styling/icons/circle buttons/overview/comet.svg	
+++ b/new-lamassu-admin/src/styling/icons/circle buttons/overview/comet.svg	
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/sf-small/overview/comet</title>
     <g id="icon/sf-small/overview/comet" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <rect id="Rectangle" stroke="#5F668A" stroke-width="2" x="1" y="1" width="7" height="7" rx="2"></rect>
         <rect id="Rectangle-Copy-2" stroke="#5F668A" stroke-width="2" x="1" y="12" width="7" height="7" rx="2"></rect>
diff --git a/new-lamassu-admin/src/styling/icons/circle buttons/overview/white.svg b/new-lamassu-admin/src/styling/icons/circle buttons/overview/white.svg
index 3af8ca54..aa7c2af6 100644
--- a/new-lamassu-admin/src/styling/icons/circle buttons/overview/white.svg	
+++ b/new-lamassu-admin/src/styling/icons/circle buttons/overview/white.svg	
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/sf-small/overview/white</title>
     <g id="icon/sf-small/overview/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <rect id="Rectangle" stroke="#FFFFFF" stroke-width="2" x="1" y="1" width="7" height="7" rx="2"></rect>
         <rect id="Rectangle-Copy-2" stroke="#FFFFFF" stroke-width="2" x="1" y="12" width="7" height="7" rx="2"></rect>
diff --git a/new-lamassu-admin/src/styling/icons/circle buttons/overview/zodiac.svg b/new-lamassu-admin/src/styling/icons/circle buttons/overview/zodiac.svg
index 112c8d25..db0c70ec 100644
--- a/new-lamassu-admin/src/styling/icons/circle buttons/overview/zodiac.svg	
+++ b/new-lamassu-admin/src/styling/icons/circle buttons/overview/zodiac.svg	
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/sf-small/overview/zodiac</title>
     <g id="icon/sf-small/overview/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <rect id="Rectangle" stroke="#1B2559" stroke-width="2" x="1" y="1" width="7" height="7" rx="2"></rect>
         <rect id="Rectangle-Copy-2" stroke="#1B2559" stroke-width="2" x="1" y="12" width="7" height="7" rx="2"></rect>
diff --git a/new-lamassu-admin/src/styling/icons/customer-nav/data/comet.svg b/new-lamassu-admin/src/styling/icons/customer-nav/data/comet.svg
index 471c383b..3504ab61 100644
--- a/new-lamassu-admin/src/styling/icons/customer-nav/data/comet.svg
+++ b/new-lamassu-admin/src/styling/icons/customer-nav/data/comet.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/customer-nav/data/comet</title>
     <g id="icon/customer-nav/data/comet" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <path d="M19,5 L19,10 C19,12.209139 14.9705627,14 10,14 C5.12689927,14 1.1537547,12.1492238 1,10 L1.00462428,5" id="Path-Copy-3" stroke="#5F668A" stroke-width="2"></path>
         <path d="M19,10 L19,15 C19,17.209139 14.9705627,19 10,19 C5.12689927,19 1.1537547,17.1492238 1,15 L1.00462428,10" id="Path-Copy-3" stroke="#5F668A" stroke-width="2"></path>
diff --git a/new-lamassu-admin/src/styling/icons/customer-nav/data/white.svg b/new-lamassu-admin/src/styling/icons/customer-nav/data/white.svg
index 20cf2885..b517414e 100644
--- a/new-lamassu-admin/src/styling/icons/customer-nav/data/white.svg
+++ b/new-lamassu-admin/src/styling/icons/customer-nav/data/white.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/customer-nav/data/white</title>
     <g id="icon/customer-nav/data/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <path d="M19,5 L19,10 C19,12.209139 14.9705627,14 10,14 C5.12689927,14 1.1537547,12.1492238 1,10 L1.00462428,5" id="Path-Copy-3" stroke="#FFFFFF" stroke-width="2"></path>
         <path d="M19,10 L19,15 C19,17.209139 14.9705627,19 10,19 C5.12689927,19 1.1537547,17.1492238 1,15 L1.00462428,10" id="Path-Copy-3" stroke="#FFFFFF" stroke-width="2"></path>
diff --git a/new-lamassu-admin/src/styling/icons/customer-nav/data/zodiac.svg b/new-lamassu-admin/src/styling/icons/customer-nav/data/zodiac.svg
index ffc069f2..735c8741 100644
--- a/new-lamassu-admin/src/styling/icons/customer-nav/data/zodiac.svg
+++ b/new-lamassu-admin/src/styling/icons/customer-nav/data/zodiac.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/customer-nav/data/zodiac</title>
     <g id="icon/customer-nav/data/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <path d="M19,5 L19,10 C19,12.209139 14.9705627,14 10,14 C5.12689927,14 1.1537547,12.1492238 1,10 L1.00462428,5" id="Path-Copy-3" stroke="#1B2559" stroke-width="2"></path>
         <path d="M19,10 L19,15 C19,17.209139 14.9705627,19 10,19 C5.12689927,19 1.1537547,17.1492238 1,15 L1.00462428,10" id="Path-Copy-3" stroke="#1B2559" stroke-width="2"></path>
diff --git a/new-lamassu-admin/src/styling/icons/customer-nav/overview/comet.svg b/new-lamassu-admin/src/styling/icons/customer-nav/overview/comet.svg
index c0ef3b45..8bb25dc1 100644
--- a/new-lamassu-admin/src/styling/icons/customer-nav/overview/comet.svg
+++ b/new-lamassu-admin/src/styling/icons/customer-nav/overview/comet.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/customer-nav/overview/comet</title>
     <g id="icon/customer-nav/overview/comet" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <rect id="Rectangle" stroke="#5F668A" stroke-width="2" x="1" y="1" width="7" height="7" rx="2"></rect>
         <rect id="Rectangle-Copy-2" stroke="#5F668A" stroke-width="2" x="1" y="12" width="7" height="7" rx="2"></rect>
diff --git a/new-lamassu-admin/src/styling/icons/customer-nav/overview/white.svg b/new-lamassu-admin/src/styling/icons/customer-nav/overview/white.svg
index 87c8dc82..77d347eb 100644
--- a/new-lamassu-admin/src/styling/icons/customer-nav/overview/white.svg
+++ b/new-lamassu-admin/src/styling/icons/customer-nav/overview/white.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/customer-nav/overview/white</title>
     <g id="icon/customer-nav/overview/white" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <rect id="Rectangle" stroke="#FFFFFF" stroke-width="2" x="1" y="1" width="7" height="7" rx="2"></rect>
         <rect id="Rectangle-Copy-2" stroke="#FFFFFF" stroke-width="2" x="1" y="12" width="7" height="7" rx="2"></rect>
diff --git a/new-lamassu-admin/src/styling/icons/customer-nav/overview/zodiac.svg b/new-lamassu-admin/src/styling/icons/customer-nav/overview/zodiac.svg
index 9e2819a5..b0d4319a 100644
--- a/new-lamassu-admin/src/styling/icons/customer-nav/overview/zodiac.svg
+++ b/new-lamassu-admin/src/styling/icons/customer-nav/overview/zodiac.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/customer-nav/overview/zodiac</title>
     <g id="icon/customer-nav/overview/zodiac" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <rect id="Rectangle" stroke="#1B2559" stroke-width="2" x="1" y="1" width="7" height="7" rx="2"></rect>
         <rect id="Rectangle-Copy-2" stroke="#1B2559" stroke-width="2" x="1" y="12" width="7" height="7" rx="2"></rect>
diff --git a/new-lamassu-admin/src/styling/icons/file/comet.svg b/new-lamassu-admin/src/styling/icons/file/comet.svg
index 231d341b..86dc1d0d 100644
--- a/new-lamassu-admin/src/styling/icons/file/comet.svg
+++ b/new-lamassu-admin/src/styling/icons/file/comet.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="32px" height="44px" viewBox="0 0 32 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/file/zip/comet</title>
     <g id="icon/file/zip/comet" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="file-icon">
             <path d="M22.0376317,0.5 C22.8639351,0.5 23.6635926,0.792348435 24.2950546,1.32529592 L24.2950546,1.32529592 L30.2574229,6.35747377 C31.045369,7.02249225 31.5,8.00110623 31.5,9.03217785 L31.5,9.03217785 L31.5,40 C31.5,40.9664983 31.1082492,41.8414983 30.4748737,42.4748737 C29.8414983,43.1082492 28.9664983,43.5 28,43.5 L28,43.5 L4,43.5 C3.03350169,43.5 2.15850169,43.1082492 1.52512627,42.4748737 C0.891750844,41.8414983 0.5,40.9664983 0.5,40 L0.5,40 L0.5,4 C0.5,3.03350169 0.891750844,2.15850169 1.52512627,1.52512627 C2.15850169,0.891750844 3.03350169,0.5 4,0.5 L4,0.5 Z" id="Rectangle" stroke="#5F668A" fill="#FFFFFF"></path>
diff --git a/new-lamassu-admin/src/styling/icons/file/spring.svg b/new-lamassu-admin/src/styling/icons/file/spring.svg
index d8650af5..26d73281 100644
--- a/new-lamassu-admin/src/styling/icons/file/spring.svg
+++ b/new-lamassu-admin/src/styling/icons/file/spring.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="32px" height="44px" viewBox="0 0 32 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/file/zip/spring</title>
     <g id="icon/file/zip/spring" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="file-icon">
             <path d="M22.0376317,0.5 C22.8639351,0.5 23.6635926,0.792348435 24.2950546,1.32529592 L24.2950546,1.32529592 L30.2574229,6.35747377 C31.045369,7.02249225 31.5,8.00110623 31.5,9.03217785 L31.5,9.03217785 L31.5,40 C31.5,40.9664983 31.1082492,41.8414983 30.4748737,42.4748737 C29.8414983,43.1082492 28.9664983,43.5 28,43.5 L28,43.5 L4,43.5 C3.03350169,43.5 2.15850169,43.1082492 1.52512627,42.4748737 C0.891750844,41.8414983 0.5,40.9664983 0.5,40 L0.5,40 L0.5,4 C0.5,3.03350169 0.891750844,2.15850169 1.52512627,1.52512627 C2.15850169,0.891750844 3.03350169,0.5 4,0.5 L4,0.5 Z" id="Rectangle" stroke="#48F694" fill="#FFFFFF"></path>
diff --git a/new-lamassu-admin/src/styling/icons/file/tomato.svg b/new-lamassu-admin/src/styling/icons/file/tomato.svg
index 0a7733b0..f7cae5ad 100644
--- a/new-lamassu-admin/src/styling/icons/file/tomato.svg
+++ b/new-lamassu-admin/src/styling/icons/file/tomato.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="32px" height="44px" viewBox="0 0 32 44" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>icon/file/zip/tomato</title>
     <g id="icon/file/zip/tomato" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="file-icon">
             <path d="M22.0376317,0.5 C22.8639351,0.5 23.6635926,0.792348435 24.2950546,1.32529592 L24.2950546,1.32529592 L30.2574229,6.35747377 C31.045369,7.02249225 31.5,8.00110623 31.5,9.03217785 L31.5,9.03217785 L31.5,40 C31.5,40.9664983 31.1082492,41.8414983 30.4748737,42.4748737 C29.8414983,43.1082492 28.9664983,43.5 28,43.5 L28,43.5 L4,43.5 C3.03350169,43.5 2.15850169,43.1082492 1.52512627,42.4748737 C0.891750844,41.8414983 0.5,40.9664983 0.5,40 L0.5,40 L0.5,4 C0.5,3.03350169 0.891750844,2.15850169 1.52512627,1.52512627 C2.15850169,0.891750844 3.03350169,0.5 4,0.5 L4,0.5 Z" id="Rectangle" stroke="#FF584A" fill="#FFFFFF"></path>

From 80d605278891b3259c59e5ea6b012edb7f17de48 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= <josepfo.w@gmail.com>
Date: Tue, 16 Nov 2021 11:44:26 +0000
Subject: [PATCH 11/12] fix: remove rebase leftovers

---
 .../src/pages/Customers/CustomerProfile.js    | 24 -------------------
 .../Customers/components/EditableCard.js      |  5 ----
 2 files changed, 29 deletions(-)

diff --git a/new-lamassu-admin/src/pages/Customers/CustomerProfile.js b/new-lamassu-admin/src/pages/Customers/CustomerProfile.js
index 01049c41..6652b4d2 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerProfile.js
+++ b/new-lamassu-admin/src/pages/Customers/CustomerProfile.js
@@ -262,30 +262,6 @@ const CustomerProfile = memo(() => {
             </div>
           )}
         </div>
-        <div className={classes.rightSidePanel}>
-          {isOverview && (
-            <div>
-              <Box
-                className={classes.customerDetails}
-                display="flex"
-                justifyContent="space-between">
-                <CustomerDetails
-                  customer={customerData}
-                  locale={locale}
-                  setShowCompliance={() => setShowCompliance(!showCompliance)}
-                />
-              </Box>
-              <div>
-                <TransactionsList
-                  customer={customerData}
-                  data={sortedTransactions}
-                  locale={locale}
-                  loading={loading}
-                />
-              </div>
-            </div>
-          )}
-        </div>
         <div className={classes.rightSidePanel}>
           {isOverview && (
             <div>
diff --git a/new-lamassu-admin/src/pages/Customers/components/EditableCard.js b/new-lamassu-admin/src/pages/Customers/components/EditableCard.js
index 1756b635..a97023dc 100644
--- a/new-lamassu-admin/src/pages/Customers/components/EditableCard.js
+++ b/new-lamassu-admin/src/pages/Customers/components/EditableCard.js
@@ -123,12 +123,7 @@ const EditableCard = ({
     [classes.label1Rejected]: state === OVERRIDE_REJECTED,
     [classes.label1Accepted]: state === OVERRIDE_AUTHORIZED
   }
-<<<<<<< HEAD
 
-=======
-  const isNotAuthorized =
-    state === OVERRIDE_REJECTED || state === OVERRIDE_PENDING
->>>>>>> feat: add dynamic position to editable cards, reject/authorize buttons
   const authorized =
     state === OVERRIDE_PENDING
       ? { label: 'Pending', type: 'neutral' }

From f8168c3a2405a523c79e468f9364f119ca4f5228 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= <josepfo.w@gmail.com>
Date: Tue, 16 Nov 2021 11:53:17 +0000
Subject: [PATCH 12/12] fix: remove unused active prop of button component

---
 new-lamassu-admin/src/components/buttons/FeatureButton.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/new-lamassu-admin/src/components/buttons/FeatureButton.js b/new-lamassu-admin/src/components/buttons/FeatureButton.js
index 86a06c5e..3fe97cd7 100644
--- a/new-lamassu-admin/src/components/buttons/FeatureButton.js
+++ b/new-lamassu-admin/src/components/buttons/FeatureButton.js
@@ -32,8 +32,8 @@ const styles = {
 const useStyles = makeStyles(styles)
 
 const FeatureButton = memo(
-  ({ className, Icon, InverseIcon, children, active, ...props }) => {
-    const classes = useStyles({ active })
+  ({ className, Icon, InverseIcon, children, ...props }) => {
+    const classes = useStyles()
 
     const classNames = {
       [classes.featureButton]: true,