From c31005d6ef4a77694d5f86c766613c49cf090501 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= Date: Tue, 19 Oct 2021 10:36:03 +0100 Subject: [PATCH] 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(() => { /> 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 ( + <> + + + +
+ +
+ {error && Failed to save} + +
+ +
+ + + ) +} + +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 @@ + + + icon/button/data/white + + + + + + + + + + + + \ 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 @@ + + + icon/button/data/zodiac + + + + + + + + + + + + \ No newline at end of file