feat: enable customer data manual entry
This commit is contained in:
José Oliveira
parent
bd0701236c
commit
8ad127c6c4
5 changed files with 274 additions and 96 deletions
|
|
@ -1,12 +1,16 @@
|
|||
import { makeStyles, Box } from '@material-ui/core'
|
||||
import classnames from 'classnames'
|
||||
import { parse, isValid } from 'date-fns/fp'
|
||||
import { parse, isValid, format } from 'date-fns/fp'
|
||||
import { Field, useFormikContext } from 'formik'
|
||||
import { parsePhoneNumberFromString } from 'libphonenumber-js'
|
||||
import * as R from 'ramda'
|
||||
import * as Yup from 'yup'
|
||||
|
||||
import { RadioGroup, TextInput } from 'src/components/inputs/formik'
|
||||
import {
|
||||
RadioGroup,
|
||||
TextInput,
|
||||
Autocomplete
|
||||
} from 'src/components/inputs/formik'
|
||||
import { H4 } from 'src/components/typography'
|
||||
import { errorColor } from 'src/styling/variables'
|
||||
|
||||
|
|
@ -35,10 +39,16 @@ const useStyles = makeStyles({
|
|||
specialGrid: {
|
||||
display: 'grid',
|
||||
gridTemplateColumns: [[182, 162, 141]]
|
||||
},
|
||||
picker: {
|
||||
width: 150
|
||||
}
|
||||
})
|
||||
|
||||
const CUSTOMER_BLOCKED = 'blocked'
|
||||
const CUSTOM = 'custom'
|
||||
const REQUIREMENT = 'requirement'
|
||||
const ID_CARD_DATA = 'idCardData'
|
||||
|
||||
const getAuthorizedStatus = it =>
|
||||
it.authorizedOverride === CUSTOMER_BLOCKED
|
||||
|
|
@ -82,18 +92,28 @@ const requirementOptions = [
|
|||
{ display: 'ID card image', code: 'idCardPhoto' },
|
||||
{ display: 'ID data', code: 'idCardData' },
|
||||
{ display: 'US SSN', code: 'usSsn' },
|
||||
{ display: 'Customer camera', code: 'facephoto' }
|
||||
{ display: 'Customer camera', code: 'frontCamera' }
|
||||
]
|
||||
|
||||
const customTextOptions = [
|
||||
{ display: 'Data entry title', code: 'title' },
|
||||
{ display: 'Data entry', code: 'data' }
|
||||
{ label: 'Data entry title', name: 'title' },
|
||||
{ label: 'Data entry', name: 'data' }
|
||||
]
|
||||
|
||||
const customUploadOptions = [{ display: 'Data entry title', code: 'title' }]
|
||||
const customUploadOptions = [{ label: 'Data entry title', name: 'title' }]
|
||||
|
||||
const entryTypeSchema = Yup.object().shape({
|
||||
entryType: Yup.string().required()
|
||||
const entryTypeSchema = Yup.lazy(values => {
|
||||
if (values.entryType === 'custom') {
|
||||
return Yup.object().shape({
|
||||
entryType: Yup.string().required(),
|
||||
dataType: Yup.string().required()
|
||||
})
|
||||
} else if (values.entryType === 'requirement') {
|
||||
return Yup.object().shape({
|
||||
entryType: Yup.string().required(),
|
||||
requirement: Yup.string().required()
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const customFileSchema = Yup.object().shape({
|
||||
|
|
@ -111,13 +131,18 @@ const customTextSchema = Yup.object().shape({
|
|||
data: Yup.string().required()
|
||||
})
|
||||
|
||||
const EntryType = ({ hasCustomRequirementOptions }) => {
|
||||
const updateRequirementOptions = it => [
|
||||
{
|
||||
display: 'Custom information requirement',
|
||||
code: 'custom'
|
||||
},
|
||||
...it
|
||||
]
|
||||
|
||||
const EntryType = ({ customInfoRequirementOptions }) => {
|
||||
const classes = useStyles()
|
||||
const { values } = useFormikContext()
|
||||
|
||||
const CUSTOM = 'custom'
|
||||
const REQUIREMENT = 'requirement'
|
||||
|
||||
const displayCustomOptions = values.entryType === CUSTOM
|
||||
const displayRequirementOptions = values.entryType === REQUIREMENT
|
||||
|
||||
|
|
@ -158,14 +183,8 @@ const EntryType = ({ hasCustomRequirementOptions }) => {
|
|||
component={RadioGroup}
|
||||
name="requirement"
|
||||
options={
|
||||
hasCustomRequirementOptions
|
||||
? [
|
||||
{
|
||||
display: 'Custom information requirement',
|
||||
code: 'custom'
|
||||
},
|
||||
...requirementOptions
|
||||
]
|
||||
!R.isEmpty(customInfoRequirementOptions)
|
||||
? updateRequirementOptions(requirementOptions)
|
||||
: requirementOptions
|
||||
}
|
||||
labelClassName={classes.label}
|
||||
|
|
@ -178,18 +197,68 @@ const EntryType = ({ hasCustomRequirementOptions }) => {
|
|||
)
|
||||
}
|
||||
|
||||
const CustomData = ({ selectedValues }) => {
|
||||
const ManualDataEntry = ({ selectedValues, customInfoRequirementOptions }) => {
|
||||
const classes = useStyles()
|
||||
|
||||
const typeOfEntrySelected = selectedValues?.entryType
|
||||
const dataTypeSelected = selectedValues?.dataType
|
||||
const upload = dataTypeSelected === 'file' || dataTypeSelected === 'image'
|
||||
const requirementSelected = selectedValues?.requirement
|
||||
|
||||
const displayRequirements = typeOfEntrySelected === 'requirement'
|
||||
|
||||
const isCustomInfoRequirement = requirementSelected === CUSTOM
|
||||
|
||||
const updatedRequirementOptions = !R.isEmpty(customInfoRequirementOptions)
|
||||
? updateRequirementOptions(requirementOptions)
|
||||
: requirementOptions
|
||||
|
||||
const requirementName = displayRequirements
|
||||
? R.find(R.propEq('code', requirementSelected))(updatedRequirementOptions)
|
||||
.display
|
||||
: ''
|
||||
|
||||
const title = displayRequirements
|
||||
? `Requirement ${requirementName}`
|
||||
: `Custom ${dataTypeSelected} entry`
|
||||
|
||||
const elements = displayRequirements
|
||||
? requirementElements[requirementSelected]
|
||||
: customElements[dataTypeSelected]
|
||||
|
||||
const upload = displayRequirements
|
||||
? requirementSelected === 'idCardPhoto' ||
|
||||
requirementSelected === 'frontCamera'
|
||||
: dataTypeSelected === 'file' || dataTypeSelected === 'image'
|
||||
|
||||
return (
|
||||
<>
|
||||
<Box display="flex" alignItems="center">
|
||||
<H4>{`Custom ${dataTypeSelected} entry`}</H4>
|
||||
<H4>{title}</H4>
|
||||
</Box>
|
||||
{customElements[dataTypeSelected].options.map(({ display, code }) => (
|
||||
<Field name={code} label={display} component={TextInput} width={390} />
|
||||
))}
|
||||
{upload && <Upload type={dataTypeSelected}></Upload>}
|
||||
{isCustomInfoRequirement && (
|
||||
<Autocomplete
|
||||
fullWidth
|
||||
label={`Available requests`}
|
||||
className={classes.picker}
|
||||
getOptionSelected={R.eqProps('code')}
|
||||
labelProp={'display'}
|
||||
options={customInfoRequirementOptions}
|
||||
onChange={(evt, it) => {
|
||||
// dispatch({ type: 'form', form: it })
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{!upload &&
|
||||
!isCustomInfoRequirement &&
|
||||
elements.options.map(({ label, name }) => (
|
||||
<Field name={name} label={label} component={TextInput} width={390} />
|
||||
))}
|
||||
{upload && (
|
||||
<Upload
|
||||
type={
|
||||
displayRequirements ? requirementSelected : dataTypeSelected
|
||||
}></Upload>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -198,20 +267,23 @@ const customElements = {
|
|||
text: {
|
||||
schema: customTextSchema,
|
||||
options: customTextOptions,
|
||||
Component: CustomData,
|
||||
initialValues: { data: '', title: '' }
|
||||
Component: ManualDataEntry,
|
||||
initialValues: { data: '', title: '' },
|
||||
saveType: 'customEntry'
|
||||
},
|
||||
file: {
|
||||
schema: customFileSchema,
|
||||
options: customUploadOptions,
|
||||
Component: CustomData,
|
||||
initialValues: { file: '', title: '' }
|
||||
Component: ManualDataEntry,
|
||||
initialValues: { file: null, title: '' },
|
||||
saveType: 'customEntryUpload'
|
||||
},
|
||||
image: {
|
||||
schema: customImageSchema,
|
||||
options: customUploadOptions,
|
||||
Component: CustomData,
|
||||
initialValues: { image: '', title: '' }
|
||||
Component: ManualDataEntry,
|
||||
initialValues: { image: null, title: '' },
|
||||
saveType: 'customEntryUpload'
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -225,7 +297,7 @@ const entryType = {
|
|||
// Customer data
|
||||
|
||||
const customerDataElements = {
|
||||
idScanElements: [
|
||||
idCardData: [
|
||||
{
|
||||
name: 'firstName',
|
||||
label: 'First name',
|
||||
|
|
@ -262,7 +334,7 @@ const customerDataElements = {
|
|||
component: TextInput
|
||||
}
|
||||
],
|
||||
usSsnElements: [
|
||||
usSsn: [
|
||||
{
|
||||
name: 'usSsn',
|
||||
label: 'US SSN',
|
||||
|
|
@ -270,12 +342,12 @@ const customerDataElements = {
|
|||
size: 190
|
||||
}
|
||||
],
|
||||
idCardPhotoElements: [{ name: 'idCardPhoto' }],
|
||||
frontCameraElements: [{ name: 'frontCamera' }]
|
||||
idCardPhoto: [{ name: 'idCardPhoto' }],
|
||||
frontCamera: [{ name: 'frontCamera' }]
|
||||
}
|
||||
|
||||
const customerDataschemas = {
|
||||
idScan: Yup.object().shape({
|
||||
const customerDataSchemas = {
|
||||
idCardData: Yup.object().shape({
|
||||
firstName: Yup.string().required(),
|
||||
lastName: Yup.string().required(),
|
||||
documentNumber: Yup.string().required(),
|
||||
|
|
@ -303,6 +375,61 @@ const customerDataschemas = {
|
|||
})
|
||||
}
|
||||
|
||||
const requirementElements = {
|
||||
idCardData: {
|
||||
schema: customerDataSchemas.idCardData,
|
||||
options: customerDataElements.idCardData,
|
||||
Component: ManualDataEntry,
|
||||
initialValues: {
|
||||
firstName: '',
|
||||
lastName: '',
|
||||
documentNumber: '',
|
||||
dateOfBirth: '',
|
||||
gender: '',
|
||||
country: '',
|
||||
expirationDate: ''
|
||||
},
|
||||
saveType: 'customerData'
|
||||
},
|
||||
usSsn: {
|
||||
schema: customerDataSchemas.usSsn,
|
||||
options: customerDataElements.usSsn,
|
||||
Component: ManualDataEntry,
|
||||
initialValues: { usSsn: '' },
|
||||
saveType: 'customerData'
|
||||
},
|
||||
idCardPhoto: {
|
||||
schema: customerDataSchemas.idCardPhoto,
|
||||
options: customerDataElements.idCardPhoto,
|
||||
Component: ManualDataEntry,
|
||||
initialValues: { idCardPhoto: null },
|
||||
saveType: 'customerDataUpload'
|
||||
},
|
||||
frontCamera: {
|
||||
schema: customerDataSchemas.frontCamera,
|
||||
options: customerDataElements.frontCamera,
|
||||
Component: ManualDataEntry,
|
||||
initialValues: { frontCamera: null },
|
||||
saveType: 'customerDataUpload'
|
||||
},
|
||||
custom: {
|
||||
// schema: customerDataSchemas.customInfoRequirement,
|
||||
Component: ManualDataEntry,
|
||||
initialValues: { customInfoRequirement: null },
|
||||
saveType: 'customInfoRequirement'
|
||||
}
|
||||
}
|
||||
|
||||
const formatDates = values => {
|
||||
R.map(
|
||||
elem =>
|
||||
(values[elem] = format('yyyyMMdd')(
|
||||
parse(new Date(), 'yyyy-MM-dd', values[elem])
|
||||
))
|
||||
)(['dateOfBirth', 'expirationDate'])
|
||||
return values
|
||||
}
|
||||
|
||||
const mapKeys = pair => {
|
||||
const [key, value] = pair
|
||||
if (key === 'txCustomerPhotoPath' || key === 'frontCameraPath') {
|
||||
|
|
@ -339,7 +466,12 @@ export {
|
|||
getName,
|
||||
entryType,
|
||||
customElements,
|
||||
requirementElements,
|
||||
formatPhotosData,
|
||||
customerDataElements,
|
||||
customerDataschemas
|
||||
customerDataSchemas,
|
||||
formatDates,
|
||||
REQUIREMENT,
|
||||
CUSTOM,
|
||||
ID_CARD_DATA
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue