diff --git a/src/api/transaction-api.ts b/src/api/transaction-api.ts index b7bbade..9b29cf1 100644 --- a/src/api/transaction-api.ts +++ b/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) => { diff --git a/src/helpers/color-helper.ts b/src/helpers/color-helper.ts index d1014d5..cf2ebd8 100644 --- a/src/helpers/color-helper.ts +++ b/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 + } +} diff --git a/src/screens/CustomerDetail/transaction/CustomerTransactionItem.tsx b/src/screens/CustomerDetail/transaction/CustomerTransactionItem.tsx index ad55846..ef6e361 100644 --- a/src/screens/CustomerDetail/transaction/CustomerTransactionItem.tsx +++ b/src/screens/CustomerDetail/transaction/CustomerTransactionItem.tsx @@ -30,7 +30,10 @@ class CustomerTransactionItem extends React.Component { {!isPhoneOrTable() && ( )} - + ) } diff --git a/src/screens/TransactionDetail/NodalStatus.tsx b/src/screens/TransactionDetail/NodalStatus.tsx new file mode 100644 index 0000000..7a2f298 --- /dev/null +++ b/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 = ({ status }: IProps) => ( + + + Nodal: {normalizeSplitTransactionStatus(nodalStatusEnum[status])} + + +) + +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 diff --git a/src/screens/TransactionDetail/SplitStatus.tsx b/src/screens/TransactionDetail/SplitStatus.tsx index 71f98bc..95ca088 100644 --- a/src/screens/TransactionDetail/SplitStatus.tsx +++ b/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 = ({ status, count }: IProps) => ( diff --git a/src/screens/Transactions/TransactionStatusCell.tsx b/src/screens/Transactions/TransactionStatusCell.tsx index 51ba123..6c028a6 100644 --- a/src/screens/Transactions/TransactionStatusCell.tsx +++ b/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) => ( + + + + + ), + ) } -const TransactionStatusCell: React.SFC = props => { +const TransactionStatusCell: React.SFC = ({ + splits, + nodal, +}: IProps) => { return ( -
- {props.splits && - getSplitsWithCount(props.splits).map( - (splitWithCount: ISplitsWithCount, index) => ( - - - - - ), - )} -
+ + {nodal.status !== nodalStatusEnum.noop && ( + <> + + + + )} + + {splits && splitStatusContainer(splits)} + ) } +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()) { diff --git a/src/screens/Transactions/TransactionsList.tsx b/src/screens/Transactions/TransactionsList.tsx index 580d9e5..5b58767 100644 --- a/src/screens/Transactions/TransactionsList.tsx +++ b/src/screens/Transactions/TransactionsList.tsx @@ -103,7 +103,10 @@ class TransactionsList extends Component { ) private handleStatus = ({ rowData }: any) => ( - + ) private handleRowClick = ({ rowData }: any) => {