feat(Coinify): adds recurring order component in trade history modal

blockchain · Jun 11, 2018 · 0187b50 · 0187b50
1 parent ffdc546
commit 0187b50
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 8 deletions.
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,12 +1,13 @@
 import React, { Fragment } from 'react'
 import styled from 'styled-components'
 import { FormattedMessage } from 'react-intl'
-import { any, equals, prop } from 'ramda'
+import { any, equals, prop, head } from 'ramda'
 import moment from 'moment'
+import * as Currency from 'blockchain-wallet-v4/src/exchange/currency'
 
 import { ModalHeader, ModalBody, Text, Button } from 'blockchain-info-components'
 import { OrderDetailsTable, OrderDetailsRow } from 'components/BuySell/OrderDetails'
-import { tradeDetails, statusHelper, bodyStatusHelper } from 'services/CoinifyService'
+import { tradeDetails, statusHelper, bodyStatusHelper, recurringTimeHelper } from 'services/CoinifyService'
 
 const TableTitle = styled(Text)`
   padding-top: 10px;
@@ -21,14 +22,37 @@ const StyledOrderDetailsTable = styled(OrderDetailsTable)`
   margin-top: 10px;
   margin-bottom: 10px;
 `
+const RecurringTradeWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin-top: 15px;
+`
+const RecurringBox = styled.div`
+  border: 1px solid ${props => props.theme['brand-tertiary']};
+  padding: 8px;
+  background: ${props => props.theme['brand-quaternary']};
+  margin-top: 5px;
+`
+const RecurringRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  padding: 5px 8px;
+`
+const RecurringKey = styled.div`
+  width: 20%;
+`
+const RecurringValue = styled.div`
+  width: auto;
+`
 
-const Trade = ({ trade, close, status }) => {
+const Trade = ({ trade, close, status, subscriptions }) => {
   let tradeStatus = (status && status.toLowerCase()) || trade.state
   const headerStatus = statusHelper(tradeStatus)
   const bodyStatus = bodyStatusHelper(tradeStatus, trade.isBuy)
   const details = tradeDetails.renderDetails(trade)
   const date = moment(prop('createdAt', trade)).local().format('MMMM D YYYY @ h:mm A')
   const isPendingSell = any(equals(prop('state', trade)))(['awaiting_transfer_in', 'processing']) && !prop('isBuy', trade)
+  const subscription = subscriptions.filter(sub => equals(sub.id, trade.tradeSubscriptionId))
 
   return (
     <Fragment>
@@ -84,6 +108,57 @@ const Trade = ({ trade, close, status }) => {
             <FormattedMessage id='orderdetails.footnote' defaultMessage='*Please note: depending on your bank’s tranfers policies, you will see the funds reflected in your account within 1-2 days from the transfer. ' />
           </Text>
         }
+        {
+          trade.tradeSubscriptionId
+            ? <RecurringTradeWrapper>
+              <Text color='brand-secondary' weight={400} size='14px'>
+                <FormattedMessage id='orderdetails.thisisrecurring' defaultMessage='This is a Recurring Order' />
+              </Text>
+              <RecurringBox>
+                <RecurringRow>
+                  <RecurringKey>
+                    <Text color='brand-secondary' weight={300} size='13px'>
+                      <FormattedMessage id='orderdetails.recurring.amount' defaultMessage='Amount:' />
+                    </Text>
+                  </RecurringKey>
+                  <RecurringValue>
+                    <Text weight={300} size='13px'>
+                      { `${Currency.formatFiat(prop('inAmount', trade) / 100)} ${prop('inCurrency', trade)}` }
+                    </Text>
+                  </RecurringValue>
+                </RecurringRow>
+                <RecurringRow>
+                  <RecurringKey>
+                    <Text color='brand-secondary' weight={300} size='13px'>
+                      <FormattedMessage id='orderdetails.recurring.frequency' defaultMessage='Frequency:' />
+                    </Text>
+                  </RecurringKey>
+                  <RecurringValue>
+                    <Text weight={300} size='13px'>
+                      {<FormattedMessage id='orderdetails.recurring.frequencybody' defaultMessage='Today and every {value}' values={{ value: recurringTimeHelper(head(subscription)) }} /> }
+                    </Text>
+                  </RecurringValue>
+                </RecurringRow>
+                <RecurringRow>
+                  <RecurringKey>
+                    <Text color='brand-secondary' weight={300} size='13px'>
+                      <FormattedMessage id='orderdetails.recurring.duration' defaultMessage='Duration:' />
+                    </Text>
+                  </RecurringKey>
+                  <RecurringValue>
+                    <Text weight={300} size='13px'>
+                      {
+                        prop('endTime', subscription)
+                          ? <FormattedMessage id='orderdetails.recurring.duration.endtime' defaultMessage='This order will repeat until {date}' values={{ date: new Date(prop('endTime', head(subscription))).toDateString() }} />
+                          : <FormattedMessage id='orderdetails.recurring.duration.noendtime' defaultMessage='Until you cancel or reach your limit, whichever happens first.' />
+                      }
+                    </Text>
+                  </RecurringValue>
+                </RecurringRow>
+              </RecurringBox>
+            </RecurringTradeWrapper>
+            : null
+        }
         <ButtonRow>
           <Button width='100px' onClick={close} nature='primary'>
             <FormattedMessage id='modals.coinifytradedetails.trade.close' defaultMessage='Close' />

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/CoinifyTradeDetails/index.js b/packages/blockchain-wallet-v4-frontend/src/modals/CoinifyTradeDetails/index.js
@@ -1,7 +1,7 @@
 import React from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators, compose } from 'redux'
-import { actions } from 'data'
+import { actions, selectors } from 'data'
 import modalEnhancer from 'providers/ModalEnhancer'
 import { Modal } from 'blockchain-info-components'
 
@@ -11,14 +11,14 @@ import Kyc from './Kyc'
 
 class CoinifyTradeDetails extends React.PureComponent {
   render () {
-    const { trade, status } = this.props
+    const { trade, status, subscriptions } = this.props
 
     const renderComponent = (trade) => {
       if (trade.constructor.name === 'Trade') {
         if (trade.medium === 'bank' && trade.state === 'awaiting_transfer_in') {
           return <BankTransfer trade={trade} close={this.props.close} />
         } else {
-          return <Trade status={status} trade={trade} close={this.props.close} />
+          return <Trade status={status} trade={trade} close={this.props.close} subscriptions={subscriptions} />
         }
       } else {
         return <Kyc status={status} close={this.props.close} />
@@ -34,7 +34,8 @@ class CoinifyTradeDetails extends React.PureComponent {
 }
 
 const mapStateToProps = (state) => ({
-  account: undefined
+  account: undefined,
+  subscriptions: selectors.core.data.coinify.getSubscriptions(state).getOrElse([])
 })
 
 const mapDispatchToProps = (dispatch) => ({

diff --git a/packages/blockchain-wallet-v4-frontend/src/services/CoinifyService/index.js b/packages/blockchain-wallet-v4-frontend/src/services/CoinifyService/index.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { gt, slice, toUpper, equals, path } from 'ramda'
+import { gt, slice, toUpper, equals, path, prop } from 'ramda'
 import { FormattedMessage } from 'react-intl'
 
 export const getLimits = (limits, curr, effectiveBalance) => {
@@ -236,3 +236,21 @@ export const getReasonExplanation = (reason, time) => {
     default: return <FormattedMessage id='scenes.coinify.cannottradereason.unknown' defaultMessage='Trading is disabled.' />
   }
 }
+
+export const recurringTimeHelper = (sub) => {
+  let human = { 1: 'st', 2: 'nd', 3: 'rd', 21: 'st', 22: 'nd', 23: 'rd', 31: 'st' }
+  let days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
+
+  let getTimespan = (sub) => {
+    console.log('getTimespan', sub)
+    let frequency = prop('frequency', sub)
+    let freq = frequency.toLowerCase()
+    let date = new Date()
+
+    if (freq === 'hourly') return 'hour'
+    if (freq === 'daily') return '24 hours'
+    if (freq === 'weekly') return `${days[date.getDay()]}`
+    if (freq === 'monthly') return `${date.getDate() + (human[date.getDate()] || 'th')} of the month`
+  }
+  return getTimespan(sub)
+}