feat(coinify trade details modal)

blockchain · May 30, 2018 · 25c182e · 25c182e
1 parent a4a1c8f
commit 25c182e
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 20 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/CoinifyTradeDetails/BankTransfer.js b/packages/blockchain-wallet-v4-frontend/src/modals/CoinifyTradeDetails/BankTransfer.js
@@ -4,7 +4,7 @@ import { FormattedMessage } from 'react-intl'
 import { ModalBody, Button } from 'blockchain-info-components'
 import BankTransferDetails from 'components/BuySell/BankTransferDetails'
 
-export const ButtonRow = styled.div`
+const ButtonRow = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: flex-end;

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/CoinifyTradeDetails/Trade.js b/packages/blockchain-wallet-v4-frontend/src/modals/CoinifyTradeDetails/Trade.js
@@ -1,22 +1,30 @@
 import React, { Fragment } from 'react'
 import styled from 'styled-components'
 import { FormattedMessage } from 'react-intl'
+import { prop } from 'ramda'
+import moment from 'moment'
+
 import { ModalHeader, ModalBody, Text, Button } from 'blockchain-info-components'
 import { OrderDetailsTable, OrderDetailsRow } from 'components/BuySell/OrderDetails'
 import { tradeDetails, statusHelper, bodyStatusHelper } from 'services/CoinifyService'
 import { spacing } from 'services/StyleService'
 
-export const ButtonRow = styled.div`
+const ButtonRow = styled.div`
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   margin-top: 20px;
 `
+const StyledOrderDetailsTable = styled(OrderDetailsTable)`
+  margin-top: 10px;
+  margin-bottom: 10px;
+`
 
 const Trade = ({ trade, close }) => {
   const headerStatus = statusHelper(trade.state)
   const bodyStatus = bodyStatusHelper(trade.state, trade.isBuy)
   const details = tradeDetails.renderDetails(trade)
+  const date = moment(prop('createdAt', trade)).local().format('MMMM D YYYY @ h:mm A')
 
   return (
     <Fragment>
@@ -29,31 +37,42 @@ const Trade = ({ trade, close }) => {
         <Text size='13px' weight={300}>
           { bodyStatus.text }
         </Text>
-        <Text style={spacing('pt-5')} size='13px' weight={300}>
-          <FormattedMessage id='orderdetails.tradeid' defaultMessage={`Your order ID is: CNY-{id}`} values={{ id: trade.id }} />
-        </Text>
-        <OrderDetailsTable style={spacing('mt-10')}>
+        <StyledOrderDetailsTable style={spacing('mt-10')}>
+          <OrderDetailsRow>
+            <Text size='13px' weight={300}><FormattedMessage id='orderdetails.coinifytradeid' defaultMessage='Coinify Trade ID' /></Text>
+            <Text size='13px' weight={300}>{prop('id', trade)}</Text>
+          </OrderDetailsRow>
+          <OrderDetailsRow>
+            <Text size='13px' weight={300}><FormattedMessage id='orderdetails.date' defaultMessage='Date Initialized' /></Text>
+            <Text size='13px' weight={300}>{date}</Text>
+          </OrderDetailsRow>
           <OrderDetailsRow>
             {
               trade.isBuy
-                ? <Text size='13px' weight={300}><FormattedMessage id='orderdetails.amounttopurchase' defaultMessage='BTC Purchased' /></Text>
-                : <Text size='13px' weight={300}><FormattedMessage id='orderdetails.amounttosell' defaultMessage='BTC Sold' /></Text>
+                ? <Text size='13px' weight={300}><FormattedMessage id='orderdetails.amounttopurchase' defaultMessage='Bitcoin Purchased' /></Text>
+                : <Text size='13px' weight={300}><FormattedMessage id='orderdetails.amounttosell' defaultMessage='Bitcoin Sold' /></Text>
             }
-            <Text size='13px' weight={300}>{details.firstRow}</Text>
-          </OrderDetailsRow>
-          <OrderDetailsRow>
-            <Text size='13px' weight={300}><FormattedMessage id='orderdetails.tradingfee' defaultMessage='Trading Fee' /></Text>
-            <Text size='13px' weight={300}>{details.fee}</Text>
+            <Text size='13px' weight={300}>{prop('btcAmount', details)}</Text>
           </OrderDetailsRow>
+        </StyledOrderDetailsTable>
+        <Text size='13px' weight={300}><FormattedMessage id='orderdetails.payoutdetails' defaultMessage='Payout Details' /></Text>
+        <StyledOrderDetailsTable>
+          {
+            !trade.isBuy &&
+            <OrderDetailsRow>
+              <Text size='13px' weight={300}><FormattedMessage id='orderdetails.bankaccount' defaultMessage='Bank Account' /></Text>
+              <Text size='13px' weight={300}>{prop('bankAccountNumber', trade)}</Text>
+            </OrderDetailsRow>
+          }
           <OrderDetailsRow>
             {
               trade.isBuy
                 ? <Text size='13px' weight={300}><FormattedMessage id='orderdetails.totalcost' defaultMessage='Total Cost' /></Text>
                 : <Text size='13px' weight={300}><FormattedMessage id='orderdetails.totaltobereceived' defaultMessage='Total To Be Received' /></Text>
             }
-            <Text size='13px' weight={300} color='success'>{details.total}</Text>
+            <Text size='13px' weight={300} color='success'>{prop('total', details)}</Text>
           </OrderDetailsRow>
-        </OrderDetailsTable>
+        </StyledOrderDetailsTable>
         <ButtonRow>
           <Button width='100px' onClick={close} nature='primary'>
             <FormattedMessage id='close' defaultMessage='Close' />

diff --git a/packages/blockchain-wallet-v4-frontend/src/services/CoinifyService/index.js b/packages/blockchain-wallet-v4-frontend/src/services/CoinifyService/index.js
@@ -105,14 +105,14 @@ export const tradeDetails = {
     const symbol = currencySymbolMap[fiat]
     if (trade.isBuy) {
       return {
-        firstRow: `${trade.receiveAmount} BTC (${symbol}${(trade.inAmount / 100).toFixed(2)})`,
-        fee: `${symbol}${((trade.sendAmount / 100) - (trade.inAmount / 100)).toFixed(2)}`,
+        btcAmount: `${trade.receiveAmount} BTC (${symbol}${(trade.inAmount / 100).toFixed(2)})`,
+        // fee: `${symbol}${((trade.sendAmount / 100) - (trade.inAmount / 100)).toFixed(2)}`,
         total: `${symbol}${(trade.sendAmount / 100).toFixed(2)}`
       }
     } else {
       return {
-        firstRow: `${trade.sendAmount / 1e8} BTC (${symbol}${(trade.outAmountExpected / 100).toFixed(2)})`,
-        fee: `${symbol}${((trade.outAmountExpected / 100) - trade.receiveAmount).toFixed(2)}`,
+        btcAmount: `${trade.sendAmount / 1e8} BTC (${symbol}${(trade.outAmountExpected / 100).toFixed(2)})`,
+        // fee: `${symbol}${((trade.outAmountExpected / 100) - trade.receiveAmount).toFixed(2)}`,
         total: `${symbol}${(trade.receiveAmount).toFixed(2)}`
       }
     }
@@ -129,7 +129,7 @@ export const statusHelper = status => {
     case 'rejected': return { color: 'error', text: <FormattedMessage id='scenes.buysellorderhistory.list.orderstatus.rejected' defaultMessage='Rejected' /> }
     case 'failed': return { color: 'error', text: <FormattedMessage id='scenes.buysellorderhistory.list.orderstatus.failed' defaultMessage='Failed' /> }
     case 'cancelled': return { color: 'error', text: <FormattedMessage id='scenes.buysellorderhistory.list.orderstatus.cancelled' defaultMessage='Cancelled' /> }
-    default: return { color: '', text: <FormattedMessage id='scenes.buysellorderhistory.list.orderstatus.unknown' defaultMessage='Unknown' /> }
+    default: return { color: 'gray-5', text: <FormattedMessage id='scenes.buysellorderhistory.list.orderstatus.unknown' defaultMessage='Unknown' /> }
   }
 }