feat: add edit, delete and image input

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

@@ -57,7 +57,12 @@ const Photo = ({ show, src }) => {
   )
 }
 
-const CustomerData = ({ customer, updateCustomer }) => {
+const CustomerData = ({
+  customer,
+  updateCustomer,
+  editCustomer,
+  deleteEditedData
+}) => {
   const classes = useStyles()
   const [listView, setListView] = useState(false)
 
@@ -75,11 +80,14 @@ const CustomerData = ({ customer, updateCustomer }) => {
     : 'Failed'
 
   const customEntries = null // get customer custom entries
+  const customRequirements = null // get customer custom requirements
 
   const isEven = elem => elem % 2 === 0
 
   const getVisibleCards = _.filter(
-    elem => !_.isEmpty(elem.data) || !_.isNil(elem.children)
+    elem =>
+      !_.isEmpty(elem.fields) ||
+      (!_.isNil(elem.children) && !_.isNil(elem.state))
   )
 
   const getAvailableFields = _.filter(({ value }) => value !== '')
@@ -96,6 +104,12 @@ const CustomerData = ({ customer, updateCustomer }) => {
     }),
     usSsn: Yup.object().shape({
       usSsn: Yup.string()
+    }),
+    idCardPhoto: Yup.object().shape({
+      idCardPhoto: Yup.mixed()
+    }),
+    frontCamera: Yup.object().shape({
+      frontCamera: Yup.mixed()
     })
   }
 
@@ -160,7 +174,7 @@ const CustomerData = ({ customer, updateCustomer }) => {
 
   const usSsnElements = [
     {
-      name: 'us ssn',
+      name: 'usSsn',
       label: 'US SSN',
       value: `${customer.usSsn ?? ''}`,
       component: TextInput,
@@ -168,6 +182,9 @@ const CustomerData = ({ customer, updateCustomer }) => {
     }
   ]
 
+  const idCardPhotoElements = [{ name: 'idCardPhoto' }]
+  const frontCameraElements = [{ name: 'frontCamera' }]
+
   const initialValues = {
     idScan: {
       name: '',
@@ -180,19 +197,26 @@ const CustomerData = ({ customer, updateCustomer }) => {
     },
     usSsn: {
       usSsn: ''
+    },
+    frontCamera: {
+      frontCamera: null
+    },
+    idCardPhoto: {
+      idCardPhoto: null
     }
   }
 
   const cards = [
     {
-      data: getAvailableFields(idScanElements),
+      fields: getAvailableFields(idScanElements),
       title: 'ID Scan',
       titleIcon: <PhoneIcon className={classes.cardIcon} />,
       state: R.path(['idCardDataOverride'])(customer),
       authorize: () =>
         updateCustomer({ idCardDataOverride: OVERRIDE_AUTHORIZED }),
       reject: () => updateCustomer({ idCardDataOverride: OVERRIDE_REJECTED }),
-      save: values => console.log(values),
+      deleteEditedData: () => deleteEditedData({ idCardData: null }),
+      save: values => editCustomer({ idCardData: values }),
       validationSchema: schemas.idScan,
       initialValues: initialValues.idScan
     },
@@ -217,17 +241,18 @@ const CustomerData = ({ customer, updateCustomer }) => {
       authorize: () =>
         updateCustomer({ sanctionsOverride: OVERRIDE_AUTHORIZED }),
       reject: () => updateCustomer({ sanctionsOverride: OVERRIDE_REJECTED }),
-      save: () => {},
       children: <Info3>{sanctionsDisplay}</Info3>
     },
     {
+      fields: getAvailableFields(frontCameraElements),
       title: 'Front facing camera',
       titleIcon: <EditIcon className={classes.editIcon} />,
       state: R.path(['frontCameraOverride'])(customer),
       authorize: () =>
         updateCustomer({ frontCameraOverride: OVERRIDE_AUTHORIZED }),
       reject: () => updateCustomer({ frontCameraOverride: OVERRIDE_REJECTED }),
-      save: () => {},
+      save: values => editCustomer({ frontCamera: values.frontCamera }),
+      deleteEditedData: () => deleteEditedData({ frontCamera: null }),
       children: customer.frontCameraPath ? (
         <Photo
           show={customer.frontCameraPath}
@@ -235,31 +260,40 @@ const CustomerData = ({ customer, updateCustomer }) => {
             customer
           )}`}
         />
-      ) : null
+      ) : null,
+      hasImage: true,
+      validationSchema: schemas.frontCamera,
+      initialValues: initialValues.frontCamera
     },
     {
+      fields: getAvailableFields(idCardPhotoElements),
       title: 'ID card image',
       titleIcon: <EditIcon className={classes.editIcon} />,
       state: R.path(['idCardPhotoOverride'])(customer),
       authorize: () =>
         updateCustomer({ idCardPhotoOverride: OVERRIDE_AUTHORIZED }),
       reject: () => updateCustomer({ idCardPhotoOverride: OVERRIDE_REJECTED }),
-      save: () => {},
+      save: values => editCustomer({ idCardPhoto: values.idCardPhoto }),
+      deleteEditedData: () => deleteEditedData({ idCardPhoto: null }),
       children: customer.idCardPhotoPath ? (
         <Photo
           show={customer.idCardPhotoPath}
           src={`${URI}/id-card-photo/${R.path(['idCardPhotoPath'])(customer)}`}
         />
-      ) : null
+      ) : null,
+      hasImage: true,
+      validationSchema: schemas.idCardPhoto,
+      initialValues: initialValues.idCardPhoto
     },
     {
-      data: getAvailableFields(usSsnElements),
+      fields: getAvailableFields(usSsnElements),
       title: 'US SSN',
       titleIcon: <CardIcon className={classes.cardIcon} />,
       state: R.path(['usSsnOverride'])(customer),
       authorize: () => updateCustomer({ usSsnOverride: OVERRIDE_AUTHORIZED }),
       reject: () => updateCustomer({ usSsnOverride: OVERRIDE_REJECTED }),
-      save: () => {},
+      save: values => editCustomer({ usSsn: values.usSsn }),
+      deleteEditedData: () => deleteEditedData({ usSsn: null }),
       validationSchema: schemas.usSsn,
       initialValues: initialValues.usSsn
     }
@@ -272,11 +306,13 @@ const CustomerData = ({ customer, updateCustomer }) => {
       reject,
       state,
       titleIcon,
-      data,
+      fields,
       save,
+      deleteEditedData,
       children,
       validationSchema,
-      initialValues
+      initialValues,
+      hasImage
     },
     idx
   ) => {
@@ -288,11 +324,13 @@ const CustomerData = ({ customer, updateCustomer }) => {
         reject={reject}
         state={state}
         titleIcon={titleIcon}
-        data={data}
+        hasImage={hasImage}
+        fields={fields}
         children={children}
         validationSchema={validationSchema}
         initialValues={initialValues}
-        save={save}></EditableCard>
+        save={save}
+        deleteEditedData={deleteEditedData}></EditableCard>
     )
   }
 
@@ -317,7 +355,7 @@ const CustomerData = ({ customer, updateCustomer }) => {
           onClick={() => setListView(true)}></FeatureButton>
       </div>
       <div>
-        {!listView && (
+        {!listView && customer && (
           <Grid container>
             <Grid container direction="column" item xs={6}>
               {visibleCards.map((elem, idx) => {
@@ -333,7 +371,12 @@ const CustomerData = ({ customer, updateCustomer }) => {
         )}
         {customEntries && (
           <div className={classes.wrapper}>
-            <div className={classes.separator}>{'Custom data entry'}</div>
+            <span className={classes.separator}>Custom data entry</span>
+          </div>
+        )}
+        {customRequirements && (
+          <div className={classes.wrapper}>
+            <span className={classes.separator}>Custom requirements</span>
           </div>
         )}
       </div>