feat: add read only fields to editable card

migrations/1641482376890-add-overrides-to-subscriber-info.js

@@ -3,7 +3,7 @@ var db = require('./db')
 exports.up = function (next) {
   var sql = [
     `ALTER TABLE customers 
-     ADD COLUMN subscriber_info_override VERIFICATION_TYPE,
+     ADD COLUMN subscriber_info_override VERIFICATION_TYPE NOT NULL DEFAULT 'automatic',
      ADD COLUMN subscriber_info_override_by UUID,
      ADD COLUMN subscriber_info_override_at TIMESTAMPTZ
     `,

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

@@ -353,7 +353,8 @@ const CustomerData = ({
     customerDataElements.smsData.push({
       name: it,
       label: onlyFirstToUpper(it),
-      component: TextInput
+      component: TextInput,
+      editable: true
     })
     Yup.object()
       .shape({

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

@@ -69,6 +69,13 @@ const fieldStyles = {
         fontSize: 14
       }
     }
+  },
+  readOnlyLabel: {
+    color: comet,
+    margin: [[3, 0, 3, 0]]
+  },
+  readOnlyValue: {
+    margin: 0
   }
 }
 
@@ -107,6 +114,23 @@ const EditableField = ({ editing, field, value, size, ...props }) => {
   )
 }
 
+const ReadOnlyField = ({ field, value, ...props }) => {
+  const classes = fieldUseStyles()
+  const classNames = {
+    [classes.field]: true,
+    [classes.notEditing]: true
+  }
+
+  return (
+    <>
+      <div className={classnames(classNames)}>
+        <Label1 className={classes.readOnlyLabel}>{field.label}</Label1>
+        <P className={classes.readOnlyValue}>{value}</P>
+      </div>
+    </>
+  )
+}
+
 const EditableCard = ({
   fields,
   save,
@@ -178,7 +202,7 @@ const EditableCard = ({
               setEditing(false)
               setError(false)
             }}>
-            {({ values, touched, errors, setFieldValue }) => (
+            {({ setFieldValue }) => (
               <Form>
                 <PromptWhenDirty />
                 <div className={classes.row}>
@@ -187,13 +211,19 @@ const EditableCard = ({
                       {!hasImage &&
                         fields?.map((field, idx) => {
                           return idx >= 0 && idx < 4 ? (
+                            !field.editable ? (
+                              <ReadOnlyField
+                                field={field}
+                                value={initialValues[field.name]}
+                              />
+                            ) : (
                               <EditableField
                                 field={field}
                                 value={initialValues[field.name]}
-                              disabled={field.disabled ?? false}
                                 editing={editing}
                                 size={180}
                               />
+                            )
                           ) : null
                         })}
                     </Grid>
@@ -201,13 +231,19 @@ const EditableCard = ({
                       {!hasImage &&
                         fields?.map((field, idx) => {
                           return idx >= 4 ? (
+                            !field.editable ? (
+                              <ReadOnlyField
+                                field={field}
+                                value={initialValues[field.name]}
+                              />
+                            ) : (
                               <EditableField
                                 field={field}
                                 value={initialValues[field.name]}
-                              disabled={field.disabled ?? false}
                                 editing={editing}
                                 size={180}
                               />
+                            )
                           ) : null
                         })}
                     </Grid>

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

@@ -355,37 +355,44 @@ const customerDataElements = {
     {
       name: 'firstName',
       label: 'First name',
-      component: TextInput
+      component: TextInput,
+      editable: true
     },
     {
       name: 'documentNumber',
       label: 'ID number',
-      component: TextInput
+      component: TextInput,
+      editable: true
     },
     {
       name: 'dateOfBirth',
       label: 'Birthdate',
-      component: TextInput
+      component: TextInput,
+      editable: true
     },
     {
       name: 'gender',
       label: 'Gender',
-      component: TextInput
+      component: TextInput,
+      editable: true
     },
     {
       name: 'lastName',
       label: 'Last name',
-      component: TextInput
+      component: TextInput,
+      editable: true
     },
     {
       name: 'expirationDate',
       label: 'Expiration Date',
-      component: TextInput
+      component: TextInput,
+      editable: true
     },
     {
       name: 'country',
       label: 'Country',
-      component: TextInput
+      component: TextInput,
+      editable: true
     }
   ],
   usSsn: [
@@ -393,7 +400,8 @@ const customerDataElements = {
       name: 'usSsn',
       label: 'US SSN',
       component: TextInput,
-      size: 190
+      size: 190,
+      editable: true
     }
   ],
   idCardPhoto: [{ name: 'idCardPhoto' }],
@@ -402,7 +410,7 @@ const customerDataElements = {
     name: 'phoneNumber',
     label: 'Phone number',
     component: TextInput,
-    disabled: true
+    editable: false
   }
 }