Merge pull request #1169 from siiky/fix/lam-376/transactions-page

fix: try to whack all the `idCardData` moles

new-lamassu-admin/src/pages/Machines/MachineComponents/Transactions/Transactions.js

@@ -11,6 +11,7 @@ import { mainStyles } from 'src/pages/Transactions/Transactions.styles'
 import { getStatus } from 'src/pages/Transactions/helper'
 import { ReactComponent as TxInIcon } from 'src/styling/icons/direction/cash-in.svg'
 import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-out.svg'
+import * as Customer from 'src/utils/customer'
 import { formatDate } from 'src/utils/timezones'
 
 import DataTable from './DataTable'
@@ -95,18 +96,6 @@ const Transactions = ({ id }) => {
     }
   }, [getTx, id])
 
-  const formatCustomerName = customer => {
-    const { firstName, lastName } = customer
-
-    return `${R.o(R.toUpper, R.head)(firstName)}. ${lastName}`
-  }
-
-  const getCustomerDisplayName = tx => {
-    if (tx.customerName) return tx.customerName
-    if (tx.customerIdCardData) return formatCustomerName(tx.customerIdCardData)
-    return tx.customerPhone
-  }
-
   const elements = [
     {
       header: '',
@@ -118,7 +107,7 @@ const Transactions = ({ id }) => {
       header: 'Customer',
       width: 122,
       size: 'sm',
-      view: getCustomerDisplayName
+      view: Customer.displayName
     },
     {
       header: 'Cash',

new-lamassu-admin/src/pages/Transactions/DetailsCard.js

@@ -33,7 +33,7 @@ import {
   offErrorColor
 } from 'src/styling/variables'
 import { URI } from 'src/utils/apollo'
-import { onlyFirstToUpper } from 'src/utils/string'
+import * as Customer from 'src/utils/customer'
 
 import CopyToClipboard from './CopyToClipboard'
 import styles from './DetailsCard.styles'
@@ -149,9 +149,7 @@ const DetailsRow = ({ it: tx, timezone }) => {
   const parseDateString = parse(new Date(), 'yyyyMMdd')
 
   const customer = tx.customerIdCardData && {
-    name: `${onlyFirstToUpper(
-      tx.customerIdCardData.firstName
-    )} ${onlyFirstToUpper(tx.customerIdCardData.lastName)}`,
+    name: Customer.formatFullName(tx.customerIdCardData),
     age:
       (tx.customerIdCardData.dateOfBirth &&
         differenceInYears(

new-lamassu-admin/src/pages/Transactions/Transactions.js

@@ -17,6 +17,7 @@ import { ReactComponent as TxOutIcon } from 'src/styling/icons/direction/cash-ou
 import { ReactComponent as CustomerLinkIcon } from 'src/styling/icons/month arrows/right.svg'
 import { ReactComponent as CustomerLinkWhiteIcon } from 'src/styling/icons/month arrows/right_white.svg'
 import { errorColor } from 'src/styling/variables'
+import * as Customer from 'src/utils/customer'
 import { formatDate } from 'src/utils/timezones'
 
 import DetailsRow from './DetailsCard'
@@ -158,24 +159,6 @@ const Transactions = () => {
     return history.push(`/compliance/customer/${customerId}`)
   }
 
-  const formatCustomerName = ({ firstName, lastName }) =>
-    R.isNil(firstName) && R.isNil(lastName)
-      ? null
-      : R.isNil(firstName)
-      ? lastName
-      : R.isNil(lastName)
-      ? firstName
-      : `${R.o(R.toUpper, R.head)(firstName)}. ${lastName}`
-
-  const getCustomerDisplayName = tx => {
-    if (tx.isAnonymous) return 'Anonymous'
-    if (tx.customerName) return tx.customerName
-    const customerName = tx.customerIdCardData
-      ? formatCustomerName(tx.customerIdCardData)
-      : null
-    return R.defaultTo(tx.customerPhone, customerName)
-  }
-
   const elements = [
     {
       header: '',
@@ -196,7 +179,7 @@ const Transactions = () => {
       size: 'sm',
       view: it => (
         <div className={classes.flexWrapper}>
-          <div className={classes.overflowTd}>{getCustomerDisplayName(it)}</div>
+          <div className={classes.overflowTd}>{Customer.displayName(it)}</div>
           {!it.isAnonymous && (
             <div onClick={() => redirect(it.customerId)}>
               {it.hasError || it.batchError ? (

new-lamassu-admin/src/utils/customer.js

@@ -0,0 +1,37 @@
+import * as R from 'ramda'
+
+import { onlyFirstToUpper } from 'src/utils/string'
+
+/* Expects a customer ID card data object */
+const formatFullName = R.pipe(
+  R.pick(['firstName', 'lastName']),
+  R.values,
+  R.reject(R.allPass([R.isNil, R.isEmpty])),
+  R.map(onlyFirstToUpper),
+  R.join(' ')
+)
+
+const formatName = idCardData => {
+  const innerFormatName = ({ firstName, lastName }) =>
+    firstName && lastName
+      ? `${R.o(R.toUpper, R.head)(firstName)}. ${lastName}`
+      : R.isNil(firstName)
+      ? lastName
+      : R.isNil(lastName)
+      ? firstName
+      : null
+  return idCardData ? innerFormatName(idCardData) : null
+}
+
+/* Expects a transaction object */
+const displayName = ({
+  isAnonymous,
+  customerName,
+  customerIdCardData,
+  customerPhone
+}) =>
+  isAnonymous
+    ? 'Anonymous'
+    : customerName || R.defaultTo(customerPhone, formatName(customerIdCardData))
+
+export { displayName, formatFullName, formatName }