Show nodal status in transaction status cell

#24

src/api/transaction-api.ts

@@ -39,7 +39,7 @@ export enum nodalStatusEnum {
   initiates = 1,
   authorized = 2,
   failed = 3,
-  captureSuccess = 4,
+  paymentArrived = 4,
   dispute = 5,
 }
 
@@ -51,6 +51,11 @@ export interface ISplitTransaction {
   updatedTimestamp: string
 }
 
+export interface INodal {
+  id: string
+  status: nodalStatusEnum
+}
+
 export interface ITransaction {
   actionStatus: transactionActionEnum
   id: string
@@ -69,10 +74,7 @@ export interface ITransaction {
   createdTimestamp: string
   updatedTimestamp: string
   transactionDetails?: ISplitTransaction[]
-  nodal: {
-    id: string
-    status: nodalStatusEnum
-  }
+  nodal: INodal
 }
 
 const getAllTransactionsFormData = (limit: number, offset: number) => {

src/helpers/color-helper.ts

@@ -1,5 +1,5 @@
 import { customerStatus } from '../api/customer-api'
-import { splitTransactionStatus } from '../api/transaction-api'
+import { nodalStatusEnum, splitTransactionStatus } from '../api/transaction-api'
 import {
   alertPending,
   alertRed,
@@ -8,6 +8,7 @@ import {
   grey,
   identity,
   positiveGreen,
+  white,
 } from '../styles/colors'
 
 export const getColorBasedOnCustomerStatus = (status: customerStatus) => {
@@ -51,3 +52,21 @@ export const getSplitTransactionColor = (
       return identity
   }
 }
+
+export const getNodalTransactionColor = (status: nodalStatusEnum): string => {
+  switch (status) {
+    case nodalStatusEnum.notInitiated:
+      return fog
+    case nodalStatusEnum.paymentArrived:
+      return positiveGreen
+    case nodalStatusEnum.dispute:
+    case nodalStatusEnum.failed:
+      return alertRed
+    case nodalStatusEnum.authorized:
+      return identity
+    case nodalStatusEnum.initiates:
+      return alertPending
+    case nodalStatusEnum.noop:
+      return white
+  }
+}

src/screens/CustomerDetail/transaction/CustomerTransactionItem.tsx

@@ -30,7 +30,10 @@ class CustomerTransactionItem extends React.Component<IProps> {
         {!isPhoneOrTable() && (
           <TimeCell time={transaction.createdTimestamp} space={SpaceEnum.s} />
         )}
-        <TransactionStatusCell splits={transaction.transactionDetails} />
+        <TransactionStatusCell
+          splits={transaction.transactionDetails}
+          nodal={transaction.nodal}
+        />
       </Container>
     )
   }

src/screens/TransactionDetail/NodalStatus.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import styled from 'styled-components'
+import { nodalStatusEnum } from '../../api/transaction-api'
+import { getNodalTransactionColor } from '../../helpers/color-helper'
+import { white } from '../../styles/colors'
+import { normalizeSplitTransactionStatus } from '../Transactions/TransactionStatusCell'
+
+interface IProps {
+  status: nodalStatusEnum
+}
+const NodalStatus: React.SFC<IProps> = ({ status }: IProps) => (
+  <Container status={status}>
+    <Text>
+      Nodal: {normalizeSplitTransactionStatus(nodalStatusEnum[status])}
+    </Text>
+  </Container>
+)
+
+const Text = styled.p`
+  padding: 0.2rem 0.7rem;
+  color: ${white};
+  font-size: 0.9rem;
+  font-weight: 600;
+  font-style: italic;
+  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+`
+
+const Container: any = styled.div`
+  background: ${(props: any) => getNodalTransactionColor(props.status)};
+  border-radius: 0.2rem;
+  display: flex;
+`
+
+export default NodalStatus

src/screens/TransactionDetail/SplitStatus.tsx

@@ -1,12 +1,12 @@
 import * as React from 'react'
 import styled from 'styled-components'
-import { splitTransactionStatus } from '../../api/transaction-api'
+import { nodalStatusEnum, splitTransactionStatus } from '../../api/transaction-api'
 import { getSplitTransactionColor } from '../../helpers/color-helper'
 import { white } from '../../styles/colors'
 import { normalizeSplitTransactionStatus } from '../Transactions/TransactionStatusCell'
 
 interface IProps {
-  status: splitTransactionStatus
+  status: splitTransactionStatus| nodalStatusEnum
   count?: number
 }
 const SplitStatus: React.SFC<IProps> = ({ status, count }: IProps) => (

src/screens/Transactions/TransactionStatusCell.tsx

@@ -1,40 +1,63 @@
 import { default as React, Fragment } from 'react'
-import { ISplitTransaction } from '../../api/transaction-api'
+import styled from 'styled-components'
+import {
+  INodal,
+  ISplitTransaction,
+  nodalStatusEnum,
+} from '../../api/transaction-api'
 import Space, { SpaceEnum } from '../../components/Space'
 import {
   getSplitsWithCount,
   ISplitsWithCount,
 } from '../../helpers/transaction-helper'
+import NodalStatus from '../TransactionDetail/NodalStatus'
 import SplitStatus from '../TransactionDetail/SplitStatus'
 
 interface IProps {
   splits: ISplitTransaction[] | undefined
+  nodal: INodal
+}
+
+function splitStatusContainer(splits: ISplitTransaction[]) {
+  return getSplitsWithCount(splits).map(
+    (splitWithCount: ISplitsWithCount, index) => (
+      <Fragment key={index}>
+        <SplitStatus
+          status={splitWithCount.status}
+          count={splitWithCount.count}
+        />
+        <Space width={SpaceEnum.s} />
+      </Fragment>
+    ),
+  )
 }
 
-const TransactionStatusCell: React.SFC<IProps> = props => {
+const TransactionStatusCell: React.SFC<IProps> = ({
+  splits,
+  nodal,
+}: IProps) => {
   return (
-    <div
-      style={{
-        display: 'flex',
-        width: '100%',
-      }}
-    >
-      {props.splits &&
-        getSplitsWithCount(props.splits).map(
-          (splitWithCount: ISplitsWithCount, index) => (
-            <Fragment key={index}>
-              <SplitStatus
-                status={splitWithCount.status}
-                count={splitWithCount.count}
-              />
-              <Space width={SpaceEnum.s} />
-            </Fragment>
-          ),
-        )}
-    </div>
+    <Container>
+      {nodal.status !== nodalStatusEnum.noop && (
+        <>
+          <NodalStatus status={nodal.status} />
+          <Space width={SpaceEnum.l} />
+        </>
+      )}
+
+      {splits && splitStatusContainer(splits)}
+    </Container>
   )
 }
 
+const Container = styled.div`
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  padding-right: 0.5rem;
+`
+
 export const normalizeSplitTransactionStatus = (status: string) => {
   return status.split('').map(char => {
     if (char === char.toUpperCase()) {

src/screens/Transactions/TransactionsList.tsx

@@ -103,7 +103,10 @@ class TransactionsList extends Component<IProps, {}> {
     <TimeCell time={rowData.updateTimestamp} />
   )
   private handleStatus = ({ rowData }: any) => (
-    <TransactionStatusCell splits={rowData.transactionDetails} />
+    <TransactionStatusCell
+      splits={rowData.transactionDetails}
+      nodal={rowData.nodal}
+    />
   )
 
   private handleRowClick = ({ rowData }: any) => {