feat: enable customer data manual entry

new-lamassu-admin/src/pages/Customers/CustomerData.js

@@ -26,7 +26,11 @@ import { URI } from 'src/utils/apollo'
 
 import styles from './CustomerData.styles.js'
 import { EditableCard } from './components'
-import { customerDataElements, customerDataschemas } from './helper.js'
+import {
+  customerDataElements,
+  customerDataSchemas,
+  formatDates
+} from './helper.js'
 
 const useStyles = makeStyles(styles)
 
@@ -64,7 +68,8 @@ const CustomerData = ({
   editCustomer,
   deleteEditedData,
   updateCustomRequest,
-  authorizeCustomRequest
+  authorizeCustomRequest,
+  updateCustomEntry
 }) => {
   const classes = useStyles()
   const [listView, setListView] = useState(false)
@@ -96,7 +101,7 @@ const CustomerData = ({
   const getVisibleCards = _.filter(elem => elem.isAvailable)
 
   const initialValues = {
-    idScan: {
+    idCardData: {
       firstName: R.path(['firstName'])(idData) ?? '',
       lastName: R.path(['lastName'])(idData) ?? '',
       documentNumber: R.path(['documentNumber'])(idData) ?? '',
@@ -124,19 +129,9 @@ const CustomerData = ({
     }
   }
 
-  const formatDates = values => {
-    _.map(
-      elem =>
-        (values[elem] = format('yyyyMMdd')(
-          parse(new Date(), 'yyyy-MM-dd', values[elem])
-        ))
-    )(['dateOfBirth', 'expirationDate'])
-    return values
-  }
-
   const cards = [
     {
-      fields: customerDataElements.idScanElements,
+      fields: customerDataElements.idCardData,
       title: 'ID Scan',
       titleIcon: <CardIcon className={classes.cardIcon} />,
       state: R.path(['idCardDataOverride'])(customer),
@@ -148,8 +143,8 @@ const CustomerData = ({
         editCustomer({
           idCardData: _.merge(idData, formatDates(values))
         }),
-      validationSchema: customerDataschemas.idScan,
+      validationSchema: customerDataSchemas.idCardData,
-      initialValues: initialValues.idScan,
+      initialValues: initialValues.idCardData,
       isAvailable: !_.isNil(idData)
     },
     {
@@ -179,7 +174,7 @@ const CustomerData = ({
       isAvailable: !_.isNil(sanctions)
     },
     {
-      fields: customerDataElements.frontCameraElements,
+      fields: customerDataElements.frontCamera,
       title: 'Front facing camera',
       titleIcon: <EditIcon className={classes.editIcon} />,
       state: R.path(['frontCameraOverride'])(customer),
@@ -201,12 +196,12 @@ const CustomerData = ({
         />
       ) : null,
       hasImage: true,
-      validationSchema: customerDataschemas.frontCamera,
+      validationSchema: customerDataSchemas.frontCamera,
       initialValues: initialValues.frontCamera,
       isAvailable: !_.isNil(customer.frontCameraPath)
     },
     {
-      fields: customerDataElements.idCardPhotoElements,
+      fields: customerDataElements.idCardPhoto,
       title: 'ID card image',
       titleIcon: <EditIcon className={classes.editIcon} />,
       state: R.path(['idCardPhotoOverride'])(customer),
@@ -226,20 +221,20 @@ const CustomerData = ({
         />
       ) : null,
       hasImage: true,
-      validationSchema: customerDataschemas.idCardPhoto,
+      validationSchema: customerDataSchemas.idCardPhoto,
       initialValues: initialValues.idCardPhoto,
       isAvailable: !_.isNil(customer.idCardPhotoPath)
     },
     {
-      fields: customerDataElements.usSsnElements,
+      fields: customerDataElements.usSsn,
       title: 'US SSN',
       titleIcon: <CardIcon className={classes.cardIcon} />,
       state: R.path(['usSsnOverride'])(customer),
       authorize: () => updateCustomer({ usSsnOverride: OVERRIDE_AUTHORIZED }),
       reject: () => updateCustomer({ usSsnOverride: OVERRIDE_REJECTED }),
-      save: values => editCustomer({ usSsn: values.usSsn }),
+      save: values => editCustomer(values),
       deleteEditedData: () => deleteEditedData({ usSsn: null }),
-      validationSchema: customerDataschemas.usSsn,
+      validationSchema: customerDataSchemas.usSsn,
       initialValues: initialValues.usSsn,
       isAvailable: !_.isNil(customer.usSsn)
     }
@@ -308,7 +303,12 @@ const CustomerData = ({
       ],
       title: it.label,
       titleIcon: <EditIcon className={classes.editIcon} />,
-      save: () => {},
+      save: values => {
+        updateCustomEntry({
+          fieldId: it.id,
+          value: values[it.label]
+        })
+      },
       deleteEditedData: () => {},
       validationSchema: Yup.object().shape({
         [it.label]: Yup.string()

new-lamassu-admin/src/pages/Customers/CustomerProfile.js

@@ -242,6 +242,12 @@ const SET_CUSTOM_ENTRY = gql`
   }
 `
 
+const EDIT_CUSTOM_ENTRY = gql`
+  mutation saveCustomField($customerId: ID!, $fieldId: ID!, $value: String!) {
+    saveCustomField(customerId: $customerId, fieldId: $fieldId, value: $value)
+  }
+`
+
 const GET_ACTIVE_CUSTOM_REQUESTS = gql`
   query customInfoRequests($onlyEnabled: Boolean) {
     customInfoRequests(onlyEnabled: $onlyEnabled) {
@@ -280,6 +286,10 @@ const CustomerProfile = memo(() => {
     onCompleted: () => getCustomer()
   })
 
+  const [editCustomEntry] = useMutation(EDIT_CUSTOM_ENTRY, {
+    onCompleted: () => getCustomer()
+  })
+
   const [replaceCustomerPhoto] = useMutation(REPLACE_CUSTOMER_PHOTO, {
     onCompleted: () => getCustomer()
   })
@@ -330,6 +340,16 @@ const CustomerProfile = memo(() => {
     setWizard(null)
   }
 
+  const updateCustomEntry = it => {
+    editCustomEntry({
+      variables: {
+        customerId,
+        fieldId: it.fieldId,
+        value: it.value
+      }
+    })
+  }
+
   const updateCustomer = it =>
     setCustomer({
       variables: {
@@ -338,7 +358,7 @@ const CustomerProfile = memo(() => {
       }
     })
 
-  const replacePhoto = it =>
+  const replacePhoto = it => {
     replaceCustomerPhoto({
       variables: {
         customerId,
@@ -346,14 +366,18 @@ const CustomerProfile = memo(() => {
         photoType: it.photoType
       }
     })
+    setWizard(null)
+  }
 
-  const editCustomer = it =>
+  const editCustomer = it => {
     editCustomerData({
       variables: {
         customerId,
         customerEdit: it
       }
     })
+    setWizard(null)
+  }
 
   const deleteEditedData = it =>
     deleteCustomerEditedData({
@@ -421,7 +445,7 @@ const CustomerProfile = memo(() => {
 
   const timezone = R.path(['config', 'locale_timezone'], configResponse)
 
-  const customRequirementOptions =
+  const customInfoRequirementOptions =
     activeCustomRequests?.customInfoRequests?.map(it => ({
       value: it.id,
       display: it.customRequest.name
@@ -564,7 +588,8 @@ const CustomerProfile = memo(() => {
                 editCustomer={editCustomer}
                 deleteEditedData={deleteEditedData}
                 updateCustomRequest={setCustomerCustomInfoRequest}
-                authorizeCustomRequest={authorizeCustomRequest}></CustomerData>
+                authorizeCustomRequest={authorizeCustomRequest}
+                updateCustomEntry={updateCustomEntry}></CustomerData>
             </div>
           )}
           {isNotes && (
@@ -590,7 +615,7 @@ const CustomerProfile = memo(() => {
             addPhoto={replacePhoto}
             addCustomerData={editCustomer}
             onClose={() => setWizard(null)}
-            customRequirementOptions={customRequirementOptions}
+            customInfoRequirementOptions={customInfoRequirementOptions}
           />
         )}
       </div>

new-lamassu-admin/src/pages/Customers/Wizard.js

@@ -1,5 +1,5 @@
 import { makeStyles } from '@material-ui/core'
-import { Form, Formik, Field } from 'formik'
+import { Form, Formik } from 'formik'
 import * as R from 'ramda'
 import React, { useState, Fragment } from 'react'
 
@@ -7,10 +7,16 @@ 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 { Dropdown } from 'src/components/inputs/formik'
 import { comet } from 'src/styling/variables'
 
-import { entryType, customElements } from './helper'
+import {
+  entryType,
+  customElements,
+  requirementElements,
+  formatDates,
+  REQUIREMENT,
+  ID_CARD_DATA
+} from './helper'
 
 const LAST_STEP = 2
 
@@ -52,11 +58,17 @@ const styles = {
 const useStyles = makeStyles(styles)
 
 const getStep = (step, selectedValues) => {
+  const elements =
+    selectedValues?.entryType === REQUIREMENT &&
+    !R.isNil(selectedValues?.requirement)
+      ? requirementElements[selectedValues?.requirement]
+      : customElements[selectedValues?.dataType]
+
   switch (step) {
     case 1:
       return entryType
     case 2:
-      return customElements[selectedValues?.dataType]
+      return elements
     default:
       return Fragment
   }
@@ -66,7 +78,7 @@ const Wizard = ({
   onClose,
   save,
   error,
-  customRequirementOptions,
+  customInfoRequirementOptions,
   addCustomerData,
   addPhoto
 }) => {
@@ -78,7 +90,10 @@ const Wizard = ({
     step: 1
   })
 
-  const isCustom = values => values?.requirement === 'custom'
+  const isIdCardData = values => values?.requirement === ID_CARD_DATA
+  const formatCustomerData = (it, newConfig) =>
+    isIdCardData(newConfig) ? { [newConfig.requirement]: formatDates(it) } : it
+
   const isLastStep = step === LAST_STEP
   const stepOptions = getStep(step, selectedValues)
 
@@ -87,7 +102,23 @@ const Wizard = ({
     setSelectedValues(newConfig)
 
     if (isLastStep) {
-      return save(newConfig)
+      switch (stepOptions.saveType) {
+        case 'customerData':
+          return addCustomerData(formatCustomerData(it, newConfig))
+        case 'customerDataUpload':
+          return addPhoto({
+            newPhoto: R.head(R.values(it)),
+            photoType: R.head(R.keys(it))
+          })
+        case 'customEntry':
+          return save(newConfig)
+        case 'customInfoRequirement':
+          return
+        // case 'customerEntryUpload':
+        //   break
+        default:
+          break
+      }
     }
 
     setState({
@@ -120,22 +151,9 @@ const Wizard = ({
             <Form className={classes.form}>
               <stepOptions.Component
                 selectedValues={selectedValues}
-                hasCustomRequirementOptions={
+                customInfoRequirementOptions={customInfoRequirementOptions}
-                  !R.isEmpty(customRequirementOptions)
-                }
                 {...stepOptions.props}
               />
-              {isCustom(values) && (
-                <div>
-                  <Field
-                    className={classes.dropdownField}
-                    component={Dropdown}
-                    label="Available requests"
-                    name="requirement.customInfoRequestId"
-                    options={customRequirementOptions}
-                  />
-                </div>
-              )}
               <div className={classes.submit}>
                 {error && <ErrorMessage>Failed to save</ErrorMessage>}
                 <Button className={classes.button} type="submit">

new-lamassu-admin/src/pages/Customers/components/Upload.js

@@ -12,7 +12,6 @@ import { offColor, subheaderColor } from 'src/styling/variables'
 const useStyles = makeStyles({
   box: {
     boxSizing: 'border-box',
-    marginTop: 40,
     width: 450,
     height: 120,
     borderStyle: 'dashed',
@@ -32,6 +31,7 @@ const useStyles = makeStyles({
     display: 'flex'
   },
   board: {
+    marginTop: 40,
     width: 450,
     height: 120
   },
@@ -48,12 +48,15 @@ const Upload = ({ type }) => {
   const { setFieldValue } = useFormikContext()
 
   const IMAGE = 'image'
-  const isImage = type === IMAGE
+  const ID_CARD_PHOTO = 'idCardPhoto'
+  const FRONT_CAMERA = 'frontCamera'
+
+  const isImage =
+    type === IMAGE || type === FRONT_CAMERA || type === ID_CARD_PHOTO
 
   const onDrop = useCallback(
     acceptedData => {
-      // TODO: attach the uploaded data to the form as well
+      setFieldValue(type, R.head(acceptedData))
-      setFieldValue(type, R.head(acceptedData).name)
 
       setData({
         preview: isImage
@@ -84,12 +87,12 @@ const Upload = ({ type }) => {
             </div>
           </div>
         )}
-        {!R.isEmpty(data) && type === IMAGE && (
+        {!R.isEmpty(data) && isImage && (
           <div key={data.name}>
             <img src={data.preview} className={classes.box} alt=""></img>
           </div>
         )}
-        {!R.isEmpty(data) && type !== IMAGE && (
+        {!R.isEmpty(data) && !isImage && (
           <div className={classes.box}>
             <H3 className={classes.uploadContent}>{data.preview}</H3>
           </div>

new-lamassu-admin/src/pages/Customers/helper.js

@@ -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' },
+  { label: 'Data entry title', name: 'title' },
-  { display: 'Data entry', code: 'data' }
+  { 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({
+const entryTypeSchema = Yup.lazy(values => {
-  entryType: Yup.string().required()
+  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
+              !R.isEmpty(customInfoRequirementOptions)
-                ? [
+                ? updateRequirementOptions(requirementOptions)
-                    {
-                      display: 'Custom information requirement',
-                      code: 'custom'
-                    },
-                    ...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 }) => (
+      {isCustomInfoRequirement && (
-        <Field name={code} label={display} component={TextInput} width={390} />
+        <Autocomplete
-      ))}
+          fullWidth
-      {upload && <Upload type={dataTypeSelected}></Upload>}
+          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,
+    Component: ManualDataEntry,
-    initialValues: { data: '', title: '' }
+    initialValues: { data: '', title: '' },
+    saveType: 'customEntry'
   },
   file: {
     schema: customFileSchema,
     options: customUploadOptions,
-    Component: CustomData,
+    Component: ManualDataEntry,
-    initialValues: { file: '', title: '' }
+    initialValues: { file: null, title: '' },
+    saveType: 'customEntryUpload'
   },
   image: {
     schema: customImageSchema,
     options: customUploadOptions,
-    Component: CustomData,
+    Component: ManualDataEntry,
-    initialValues: { image: '', title: '' }
+    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' }],
+  idCardPhoto: [{ name: 'idCardPhoto' }],
-  frontCameraElements: [{ name: 'frontCamera' }]
+  frontCamera: [{ name: 'frontCamera' }]
 }
 
-const customerDataschemas = {
+const customerDataSchemas = {
-  idScan: Yup.object().shape({
+  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
 }