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(() => {
/>
Actions
+
+
setWizard(true)}>
+ {`Manual data entry`}
+
+
)}
+ {wizard && (
+ {}}
+ onClose={() => setWizard(null)}
+ />
+ )}
>
)
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 (
+ <>
+
+
+
+
+
+
+ >
+ )
+}
+
+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 (
+ <>
+
+ Type of entry
+
+
+ {displayCustom && (
+
+
+ Type of data
+
+
+
+ )}
+ {!displayCustom && (
+
+
+ Requirements
+
+
+
+ )}
+ >
+ )
+}
+
+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 @@
+
+
\ 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 @@
+
+
\ No newline at end of file