523 lines
13 KiB
JavaScript
523 lines
13 KiB
JavaScript
import { makeStyles, Box } from '@material-ui/core'
|
|
import classnames from 'classnames'
|
|
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,
|
|
Autocomplete
|
|
} from 'src/components/inputs/formik'
|
|
import { H4 } from 'src/components/typography'
|
|
import { errorColor } from 'src/styling/variables'
|
|
import { MANUAL } from 'src/utils/constants'
|
|
|
|
import { Upload } from './components'
|
|
|
|
const useStyles = makeStyles({
|
|
radio: {
|
|
padding: 4,
|
|
margin: 4
|
|
},
|
|
radioGroup: {
|
|
flexDirection: 'row'
|
|
},
|
|
error: {
|
|
color: errorColor
|
|
},
|
|
specialLabel: {
|
|
height: 40,
|
|
padding: 0,
|
|
width: 250
|
|
},
|
|
label: {
|
|
height: 40,
|
|
padding: 0
|
|
},
|
|
specialGrid: {
|
|
display: 'grid',
|
|
gridTemplateColumns: [[182, 162, 141]]
|
|
},
|
|
picker: {
|
|
width: 150
|
|
},
|
|
field: {
|
|
'& > *:last-child': {
|
|
marginBottom: 24
|
|
}
|
|
}
|
|
})
|
|
|
|
const CUSTOMER_BLOCKED = 'blocked'
|
|
const CUSTOM = 'custom'
|
|
const REQUIREMENT = 'requirement'
|
|
const ID_CARD_DATA = 'idCardData'
|
|
|
|
const getAuthorizedStatus = (it, triggers) => {
|
|
const fields = [
|
|
'frontCameraPath',
|
|
'idCardData',
|
|
'idCardPhotoPath',
|
|
'usSsn',
|
|
'sanctions'
|
|
]
|
|
|
|
const isManualField = fieldName => {
|
|
const manualOverrides = R.filter(
|
|
ite => R.equals(R.toLower(ite.automation), MANUAL),
|
|
triggers?.overrides ?? []
|
|
)
|
|
|
|
return (
|
|
!!R.find(ite => R.equals(ite.requirement, fieldName), manualOverrides) ||
|
|
R.equals(triggers.automation, MANUAL)
|
|
)
|
|
}
|
|
|
|
const pendingFieldStatus = R.map(
|
|
ite =>
|
|
!R.isNil(it[`${ite}`])
|
|
? isManualField(ite)
|
|
? R.equals(it[`${ite}Override`], 'automatic')
|
|
: false
|
|
: false,
|
|
fields
|
|
)
|
|
|
|
if (it.authorizedOverride === CUSTOMER_BLOCKED)
|
|
return { label: 'Blocked', type: 'error' }
|
|
if (it.isSuspended)
|
|
return it.daysSuspended > 0
|
|
? { label: `${it.daysSuspended} day suspension`, type: 'warning' }
|
|
: { label: `< 1 day suspension`, type: 'warning' }
|
|
if (R.any(ite => ite === true, pendingFieldStatus))
|
|
return { label: 'Pending', type: 'warning' }
|
|
return { label: 'Authorized', type: 'success' }
|
|
}
|
|
|
|
const getFormattedPhone = (phone, country) => {
|
|
const phoneNumber =
|
|
phone && country ? parsePhoneNumberFromString(phone, country) : null
|
|
|
|
return phoneNumber ? phoneNumber.formatInternational() : phone
|
|
}
|
|
|
|
const getName = it => {
|
|
const idData = R.path(['idCardData'])(it)
|
|
|
|
return `${R.path(['firstName'])(idData) ?? ''} ${R.path(['lastName'])(
|
|
idData
|
|
) ?? ''}`.trim()
|
|
}
|
|
|
|
// Manual Entry Wizard
|
|
|
|
const entryOptions = [
|
|
{ display: 'Custom entry', code: 'custom' },
|
|
{ display: 'Populate existing requirement', code: 'requirement' }
|
|
]
|
|
|
|
const dataOptions = [
|
|
{ display: 'Text', code: 'text' }
|
|
// TODO: Requires backend modifications to support File and Image
|
|
// { display: 'File', code: 'file' },
|
|
// { display: 'Image', code: 'image' }
|
|
]
|
|
|
|
const requirementOptions = [
|
|
{ display: 'ID card image', code: 'idCardPhoto' },
|
|
{ display: 'ID data', code: 'idCardData' },
|
|
{ display: 'US SSN', code: 'usSsn' },
|
|
{ display: 'Customer camera', code: 'frontCamera' }
|
|
]
|
|
|
|
const customTextOptions = [
|
|
{ label: 'Data entry title', name: 'title' },
|
|
{ label: 'Data entry', name: 'data' }
|
|
]
|
|
|
|
const customUploadOptions = [{ label: 'Data entry title', name: 'title' }]
|
|
|
|
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({
|
|
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({
|
|
title: Yup.string().required(),
|
|
data: Yup.string().required()
|
|
})
|
|
|
|
const updateRequirementOptions = it => [
|
|
{
|
|
display: 'Custom information requirement',
|
|
code: 'custom'
|
|
},
|
|
...it
|
|
]
|
|
|
|
const EntryType = ({ customInfoRequirementOptions }) => {
|
|
const classes = useStyles()
|
|
const { values } = useFormikContext()
|
|
|
|
const displayCustomOptions = values.entryType === CUSTOM
|
|
const displayRequirementOptions = values.entryType === REQUIREMENT
|
|
|
|
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)}
|
|
/>
|
|
{displayCustomOptions && (
|
|
<div>
|
|
<Box display="flex" alignItems="center">
|
|
<H4>Type of data</H4>
|
|
</Box>
|
|
<Field
|
|
component={RadioGroup}
|
|
name="dataType"
|
|
options={dataOptions}
|
|
labelClassName={classes.label}
|
|
radioClassName={classes.radio}
|
|
className={classnames(classes.radioGroup, classes.specialGrid)}
|
|
/>
|
|
</div>
|
|
)}
|
|
{displayRequirementOptions && (
|
|
<div>
|
|
<Box display="flex" alignItems="center">
|
|
<H4>Requirements</H4>
|
|
</Box>
|
|
<Field
|
|
component={RadioGroup}
|
|
name="requirement"
|
|
options={
|
|
requirementOptions
|
|
// TODO: Enable once custom info requirement manual entry is finished
|
|
// !R.isEmpty(customInfoRequirementOptions)
|
|
// ? updateRequirementOptions(requirementOptions)
|
|
// : requirementOptions
|
|
}
|
|
labelClassName={classes.label}
|
|
radioClassName={classes.radio}
|
|
className={classnames(classes.radioGroup, classes.specialGrid)}
|
|
/>
|
|
</div>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
const ManualDataEntry = ({ selectedValues, customInfoRequirementOptions }) => {
|
|
const classes = useStyles()
|
|
|
|
const typeOfEntrySelected = selectedValues?.entryType
|
|
const dataTypeSelected = selectedValues?.dataType
|
|
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>{title}</H4>
|
|
</Box>
|
|
{isCustomInfoRequirement && (
|
|
<Autocomplete
|
|
fullWidth
|
|
label={`Available requests`}
|
|
className={classes.picker}
|
|
getOptionSelected={R.eqProps('code')}
|
|
labelProp={'display'}
|
|
options={customInfoRequirementOptions}
|
|
onChange={(evt, it) => {}}
|
|
/>
|
|
)}
|
|
<div className={classes.field}>
|
|
{!upload &&
|
|
!isCustomInfoRequirement &&
|
|
elements.options.map(({ label, name }) => (
|
|
<Field
|
|
name={name}
|
|
label={label}
|
|
component={TextInput}
|
|
width={390}
|
|
/>
|
|
))}
|
|
</div>
|
|
{upload && (
|
|
<Upload
|
|
type={
|
|
displayRequirements ? requirementSelected : dataTypeSelected
|
|
}></Upload>
|
|
)}
|
|
</>
|
|
)
|
|
}
|
|
|
|
const customElements = {
|
|
text: {
|
|
schema: customTextSchema,
|
|
options: customTextOptions,
|
|
Component: ManualDataEntry,
|
|
initialValues: { data: '', title: '' },
|
|
saveType: 'customEntry'
|
|
},
|
|
file: {
|
|
schema: customFileSchema,
|
|
options: customUploadOptions,
|
|
Component: ManualDataEntry,
|
|
initialValues: { file: null, title: '' },
|
|
saveType: 'customEntryUpload'
|
|
},
|
|
image: {
|
|
schema: customImageSchema,
|
|
options: customUploadOptions,
|
|
Component: ManualDataEntry,
|
|
initialValues: { image: null, title: '' },
|
|
saveType: 'customEntryUpload'
|
|
}
|
|
}
|
|
|
|
const entryType = {
|
|
schema: entryTypeSchema,
|
|
options: entryOptions,
|
|
Component: EntryType,
|
|
initialValues: { entryType: '' }
|
|
}
|
|
|
|
// Customer data
|
|
|
|
const customerDataElements = {
|
|
idCardData: [
|
|
{
|
|
name: 'firstName',
|
|
label: 'First name',
|
|
component: TextInput
|
|
},
|
|
{
|
|
name: 'documentNumber',
|
|
label: 'ID number',
|
|
component: TextInput
|
|
},
|
|
{
|
|
name: 'dateOfBirth',
|
|
label: 'Birthdate',
|
|
component: TextInput
|
|
},
|
|
{
|
|
name: 'gender',
|
|
label: 'Gender',
|
|
component: TextInput
|
|
},
|
|
{
|
|
name: 'lastName',
|
|
label: 'Last name',
|
|
component: TextInput
|
|
},
|
|
{
|
|
name: 'expirationDate',
|
|
label: 'Expiration Date',
|
|
component: TextInput
|
|
},
|
|
{
|
|
name: 'country',
|
|
label: 'Country',
|
|
component: TextInput
|
|
}
|
|
],
|
|
usSsn: [
|
|
{
|
|
name: 'usSsn',
|
|
label: 'US SSN',
|
|
component: TextInput,
|
|
size: 190
|
|
}
|
|
],
|
|
idCardPhoto: [{ name: 'idCardPhoto' }],
|
|
frontCamera: [{ name: 'frontCamera' }]
|
|
}
|
|
|
|
const customerDataSchemas = {
|
|
idCardData: Yup.object().shape({
|
|
firstName: Yup.string().required(),
|
|
lastName: Yup.string().required(),
|
|
documentNumber: Yup.string().required(),
|
|
dateOfBirth: Yup.string()
|
|
.test({
|
|
test: val => isValid(parse(new Date(), 'yyyy-MM-dd', val))
|
|
})
|
|
.required(),
|
|
gender: Yup.string().required(),
|
|
country: Yup.string().required(),
|
|
expirationDate: Yup.string()
|
|
.test({
|
|
test: val => isValid(parse(new Date(), 'yyyy-MM-dd', val))
|
|
})
|
|
.required()
|
|
}),
|
|
usSsn: Yup.object().shape({
|
|
usSsn: Yup.string().required()
|
|
}),
|
|
idCardPhoto: Yup.object().shape({
|
|
idCardPhoto: Yup.mixed().required()
|
|
}),
|
|
frontCamera: Yup.object().shape({
|
|
frontCamera: Yup.mixed().required()
|
|
})
|
|
}
|
|
|
|
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') {
|
|
return ['path', value]
|
|
}
|
|
if (key === 'txCustomerPhotoAt' || key === 'frontCameraAt') {
|
|
return ['date', value]
|
|
}
|
|
return pair
|
|
}
|
|
|
|
const addPhotoDir = R.map(it => {
|
|
const hasFrontCameraData = R.has('id')(it)
|
|
return hasFrontCameraData
|
|
? { ...it, photoDir: 'operator-data/customersphotos' }
|
|
: { ...it, photoDir: 'front-camera-photo' }
|
|
})
|
|
|
|
const standardizeKeys = R.map(R.compose(R.fromPairs, R.map(mapKeys), R.toPairs))
|
|
|
|
const filterByPhotoAvailable = R.filter(
|
|
tx => !R.isNil(tx.date) && !R.isNil(tx.path)
|
|
)
|
|
|
|
const formatPhotosData = R.compose(
|
|
filterByPhotoAvailable,
|
|
addPhotoDir,
|
|
standardizeKeys
|
|
)
|
|
|
|
export {
|
|
getAuthorizedStatus,
|
|
getFormattedPhone,
|
|
getName,
|
|
entryType,
|
|
customElements,
|
|
requirementElements,
|
|
formatPhotosData,
|
|
customerDataElements,
|
|
customerDataSchemas,
|
|
formatDates,
|
|
REQUIREMENT,
|
|
CUSTOM,
|
|
ID_CARD_DATA
|
|
}
|