fix: soft rework Customers pages

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

@@ -1,4 +1,4 @@
-import { makeStyles } from '@material-ui/core/styles'
+import { makeStyles, Box } from '@material-ui/core'
 import moment from 'moment'
 import * as R from 'ramda'
 import React, { memo } from 'react'
@@ -8,16 +8,44 @@ import {
   OVERRIDE_AUTHORIZED,
   OVERRIDE_REJECTED
 } from 'src/pages/Customers/components/propertyCard'
-
-import mainStyles from '../CustomersList.styles'
+import { ifNotNull } from 'src/utils/nullCheck'
 
 import Field from './Field'
 
-const useStyles = makeStyles(mainStyles)
+const useStyles = makeStyles({
+  idDataCard: {
+    width: 550,
+    height: 240
+  },
+  column: {
+    marginBottom: 7
+  }
+})
 
 const IdDataCard = memo(({ customerData, updateCustomer }) => {
   const classes = useStyles()
 
+  const idData = R.path(['idCardData'])(customerData)
+
+  const name = R.path(['firstName'])(idData) ?? ''
+  const lastName = R.path(['lastName'])(idData) ?? ''
+
+  const gender = R.path(['gender'])(idData)
+  const idNumber = R.path(['documentNumber'])(idData)
+  const country = R.path(['country'])(idData)
+
+  const rawExpirationDate = R.path(['expirationDate'])(idData)
+  const expirationDate = ifNotNull(
+    rawExpirationDate,
+    moment.utc(rawExpirationDate).format('YYYY-MM-D')
+  )
+
+  const rawDob = R.path(['dateOfBirth'])(idData)
+  const age = ifNotNull(
+    rawDob,
+    moment.utc().diff(moment.utc(rawDob).format('YYYY-MM-D'), 'years')
+  )
+
   return (
     <PropertyCard
       className={classes.idDataCard}
@@ -27,48 +55,21 @@ const IdDataCard = memo(({ customerData, updateCustomer }) => {
         updateCustomer({ idCardDataOverride: OVERRIDE_AUTHORIZED })
       }
       reject={() => updateCustomer({ idCardDataOverride: OVERRIDE_REJECTED })}>
-      <div className={classes.rowSpaceBetween}>
-        <div className={classes.column}>
-          <Field
-            label={'Name'}
-            display={`${R.path(['idCardData', 'firstName'])(
-              customerData
-            )} ${R.path(['idCardData', 'lastName'])(customerData)}`}
-          />
-          <Field
-            label={'Gender'}
-            display={R.path(['idCardData', 'gender'])(customerData)}
-          />
-        </div>
-        <div className={classes.column}>
-          <Field
-            label={'ID number'}
-            display={R.path(['idCardData', 'documentNumber'])(customerData)}
-          />
-          <Field
-            label={'Country'}
-            display={R.path(['idCardData', 'country'])(customerData)}
-          />
-        </div>
-        <div className={classes.column}>
-          <Field
-            label={'Age'}
-            display={moment
-              .utc()
-              .diff(
-                moment
-                  .utc(R.path(['idCardData', 'dateOfBirth'])(customerData))
-                  .format('YYYY-MM-D'),
-                'years'
-              )}
-          />
-          <Field
-            label={'Expiration date'}
-            display={moment
-              .utc(R.path(['idCardData', 'expirationDate'])(customerData))
-              .format('YYYY-MM-D')}
-          />
-        </div>
+      <div>
+        <Box
+          display="flex"
+          alignItems="center"
+          justifyContent="space-between"
+          mb={1}>
+          <Field label={'Name'} display={`${name} ${lastName}`} />
+          <Field label={'ID number'} display={idNumber} />
+          <Field label={'Age'} display={age} />
+        </Box>
+        <Box display="flex" alignItems="center" justifyContent="space-between">
+          <Field label={'Gender'} display={gender} />
+          <Field label={'Country'} display={country} />
+          <Field label={'Expiration date'} display={expirationDate} />
+        </Box>
       </div>
     </PropertyCard>
   )