From a64dac0b405002e1d86f5892188f8efbb821db0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= <josepfo.w@gmail.com>
Date: Mon, 10 Jan 2022 17:28:23 +0000
Subject: [PATCH] feat: add read only fields to editable card

---
 ...376890-add-overrides-to-subscriber-info.js |  2 +-
 .../src/pages/Customers/CustomerData.js       |  3 +-
 .../Customers/components/EditableCard.js      | 66 ++++++++++++++-----
 .../src/pages/Customers/helper.js             | 26 +++++---
 4 files changed, 71 insertions(+), 26 deletions(-)

diff --git a/migrations/1641482376890-add-overrides-to-subscriber-info.js b/migrations/1641482376890-add-overrides-to-subscriber-info.js
index dcfd4f9f..e5e502ef 100644
--- a/migrations/1641482376890-add-overrides-to-subscriber-info.js
+++ b/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
     `,
diff --git a/new-lamassu-admin/src/pages/Customers/CustomerData.js b/new-lamassu-admin/src/pages/Customers/CustomerData.js
index a195e320..2e4cabbc 100644
--- a/new-lamassu-admin/src/pages/Customers/CustomerData.js
+++ b/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({
diff --git a/new-lamassu-admin/src/pages/Customers/components/EditableCard.js b/new-lamassu-admin/src/pages/Customers/components/EditableCard.js
index 0169d5b3..be586ca2 100644
--- a/new-lamassu-admin/src/pages/Customers/components/EditableCard.js
+++ b/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 ? (
-                            <EditableField
-                              field={field}
-                              value={initialValues[field.name]}
-                              disabled={field.disabled ?? false}
-                              editing={editing}
-                              size={180}
-                            />
+                            !field.editable ? (
+                              <ReadOnlyField
+                                field={field}
+                                value={initialValues[field.name]}
+                              />
+                            ) : (
+                              <EditableField
+                                field={field}
+                                value={initialValues[field.name]}
+                                editing={editing}
+                                size={180}
+                              />
+                            )
                           ) : null
                         })}
                     </Grid>
@@ -201,13 +231,19 @@ const EditableCard = ({
                       {!hasImage &&
                         fields?.map((field, idx) => {
                           return idx >= 4 ? (
-                            <EditableField
-                              field={field}
-                              value={initialValues[field.name]}
-                              disabled={field.disabled ?? false}
-                              editing={editing}
-                              size={180}
-                            />
+                            !field.editable ? (
+                              <ReadOnlyField
+                                field={field}
+                                value={initialValues[field.name]}
+                              />
+                            ) : (
+                              <EditableField
+                                field={field}
+                                value={initialValues[field.name]}
+                                editing={editing}
+                                size={180}
+                              />
+                            )
                           ) : null
                         })}
                     </Grid>
diff --git a/new-lamassu-admin/src/pages/Customers/helper.js b/new-lamassu-admin/src/pages/Customers/helper.js
index d9da1486..c4363746 100644
--- a/new-lamassu-admin/src/pages/Customers/helper.js
+++ b/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
   }
 }