feat(Coinify): adds next recurring trade component for checkout

blockchain · Jun 11, 2018 · 4cdc73c · 4cdc73c
1 parent 86d0b4c
commit 4cdc73c
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 14 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
@@ -7,7 +7,7 @@ import * as Currency from 'blockchain-wallet-v4/src/exchange/currency'
 
 import { ModalHeader, ModalBody, Text, Button, Tooltip } from 'blockchain-info-components'
 import { OrderDetailsTable, OrderDetailsRow } from 'components/BuySell/OrderDetails'
-import { tradeDetails, statusHelper, bodyStatusHelper, recurringTimeHelper } from 'services/CoinifyService'
+import { tradeDetails, statusHelper, bodyStatusHelper, recurringTimeHelper, recurringFee } from 'services/CoinifyService'
 
 const TableTitle = styled(Text)`
   padding-top: 10px;
@@ -53,8 +53,6 @@ const HeaderWrapper = styled.div`
   }
 `
 
-const recurringFee = (trade) => `${Currency.formatFiat(((trade.sendAmount / 100) - (trade.inAmount / 100)))} ${prop('inCurrency', trade)}`
-
 const Trade = ({ trade, close, status, subscriptions }) => {
   let tradeStatus = (status && status.toLowerCase()) || trade.state
   const headerStatus = statusHelper(tradeStatus)

diff --git a/...ges/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Buy/index.js b/...ges/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Buy/index.js
@@ -29,7 +29,7 @@ class CoinifyBuyContainer extends React.Component {
 
   render () {
     const { data, modalActions, coinifyActions, coinifyDataActions, rateQuoteR, buyQuoteR, currency, paymentMedium, trade, formActions, canTrade, ...rest } = this.props
-    const { step, checkoutBusy, coinifyBusy } = rest
+    const { step, checkoutBusy, coinifyBusy, subscriptions, trades } = rest
     const { handleTrade, fetchQuote, refreshBuyQuote } = coinifyDataActions
     const { showModal } = modalActions
     const { coinifyNotAsked, openKYC, coinifyNextCheckoutStep } = coinifyActions
@@ -65,6 +65,8 @@ class CoinifyBuyContainer extends React.Component {
         changeTab={tab => change('buySellTabStatus', 'status', tab)}
         coinifyNextCheckoutStep={step => coinifyNextCheckoutStep(step)}
         canTrade={canTrade}
+        subscriptions={subscriptions}
+        trades={trades}
       />,
       Failure: (msg) => <div>Failure: {msg.error}</div>,
       Loading: () => <Loading />,

diff --git a/...blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Buy/selectors.js b/...blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Buy/selectors.js
@@ -11,13 +11,7 @@ export const getProfileData = (state) => {
 export const getTrades = (state) =>
   selectors.core.data.coinify.getTrades(state).getOrElse(null)
 
-export const getSubscriptions = (state) => {
-  try {
-    return selectors.core.data.coinify.getSubscriptions(state).data
-  } catch (e) {
-    return null
-  }
-}
+export const getSubscriptions = (state) => selectors.core.data.coinify.getSubscriptions(state).getOrElse([])
 
 export const getRateQuote = (state) => {
   try {

diff --git a/...ain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Buy/template.success.js b/...ain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Buy/template.success.js
@@ -13,12 +13,13 @@ import { OrderDetails, OrderSubmit } from '../OrderReview'
 import Payment from 'modals/CoinifyExchangeData/Payment'
 import ISignThis from 'modals/CoinifyExchangeData/ISignThis'
 import KYCNotification from '../KYCNotification'
+import NextSubscription from '../NextSubscription'
 import BankTransferDetails from 'components/BuySell/BankTransferDetails'
 
 const CheckoutWrapper = styled.div`
   display: grid;
-  grid-template-columns: 55% 35%;
-  grid-gap: 10%;
+  grid-template-columns: 55% 40%;
+  grid-gap: 5%;
 `
 const OrderSubmitWrapper = styled.div`
   display: flex;
@@ -48,13 +49,16 @@ const CoinifyBuy = props => {
     handleKycAction,
     changeTab,
     coinifyNextCheckoutStep,
-    canTrade
+    canTrade,
+    subscriptions,
+    trades
   } = props
 
   const profile = Remote.of(prop('profile', value)).getOrElse({ _limits: service.mockedLimits, _level: { currency: 'EUR' } })
   const kyc = path(['kycs', 'length'], value) && head(value.kycs)
   const defaultCurrency = currency || 'EUR' // profile._level.currency
   const symbol = service.currencySymbolMap[defaultCurrency]
+  const activeSubscriptions = subscriptions.filter(s => s.isActive)
 
   const limits = service.getLimits(profile._limits, defaultCurrency)
 
@@ -80,6 +84,11 @@ const CoinifyBuy = props => {
               />
             </LeftContainer>
             <RightContainer>
+              {
+                activeSubscriptions.length > 0
+                  ? <NextSubscription subscriptions={subscriptions} trades={trades.filter(t => t.tradeSubscriptionId)} manageOrder={() => changeTab('order_history')} />
+                  : null
+              }
               {
                 path(['kycs', 'length'], value) && path(['state'], kyc)
                   ? <KYCNotification kyc={kyc} limits={limits.buy} symbol={symbol} onTrigger={(kyc) => handleKycAction(kyc)} canTrade={canTrade} />

diff --git a/...ckchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/NextSubscription.js b/...ckchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/NextSubscription.js
@@ -0,0 +1,67 @@
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+import styled from 'styled-components'
+import { Text, Link } from 'blockchain-info-components'
+import { prop, head } from 'ramda'
+import * as Currency from 'blockchain-wallet-v4/src/exchange/currency'
+import { recurringTimeHelper, recurringFee } from 'services/CoinifyService'
+
+const NextRecurringWrapper = styled.div`
+  background: ${props => props.theme['brand-quaternary']};
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 25px;
+  div:first-of-type {
+    margin-bottom: 20px;
+  }
+`
+const NextRecurringRow = styled.div`
+  display: flex;
+  flex-direction: row;
+  div:first-of-type {
+    margin-right: 5px;
+  }
+`
+const LinkContainer = styled.div`
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 10px;
+`
+
+const NextSubscription = ({ subscriptions, trades, manageOrder }) => {
+  let matchedTrades = trades.filter(t => prop('tradeSubscriptionId', t) === prop('id', head(subscriptions)))
+  let trade = matchedTrades.sort((a, b) => a.createdAt < b.createdAt)
+  let nextTrade = head(trade)
+
+  return (
+    <NextRecurringWrapper>
+      <Text size='14px' weight={300}>
+        <FormattedMessage id='scenes.buysell.coinifycheckout.content.nextsubscription.title' defaultMessage='Your Next Recurring Order is Scheduled' />
+      </Text>
+      <NextRecurringRow>
+        <Text size='13px' weight={300}>
+          <FormattedMessage id='scenes.buysell.coinifycheckout.content.nextsubscription.amount' defaultMessage='Amount:' />
+        </Text>
+        <Text weight={200} size='13px'>
+          {`${Currency.formatFiat(prop('inAmount', nextTrade) / 100)} ${prop('inCurrency', nextTrade)} (+ ${recurringFee(nextTrade)} Payment Fee)`}
+        </Text>
+      </NextRecurringRow>
+      <NextRecurringRow>
+        <Text weight={300} size='13px'>
+          <FormattedMessage id='scenes.buysell.coinifycheckout.content.nextsubscription.frequency' defaultMessage='Frequency:' />
+        </Text>
+        <Text weight={200} size='13px'>
+          {<FormattedMessage id='scenes.buysell.coinifycheckout.content.nextsubscription.frequencybody' defaultMessage='This order will happen every {value}' values={{ value: recurringTimeHelper(head(subscriptions)) }} />}
+        </Text>
+      </NextRecurringRow>
+      <LinkContainer>
+        <Link weight={300} size='13px' onClick={manageOrder}>
+          <FormattedMessage id='scenes.buysell.coinifycheckout.content.nextsubscription.manageorder' defaultMessage='Manage This Order' />
+        </Link>
+      </LinkContainer>
+    </NextRecurringWrapper>
+  )
+}
+
+export default NextSubscription
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,6 +1,7 @@
 import React from 'react'
 import { gt, slice, toUpper, equals, path, prop } from 'ramda'
 import { FormattedMessage } from 'react-intl'
+import * as Currency from 'blockchain-wallet-v4/src/exchange/currency'
 
 export const getLimits = (limits, curr, effectiveBalance) => {
   const getMin = (limits, curr) => Math.min(limits.bank.minimumInAmounts[curr], limits.card.minimumInAmounts[curr])
@@ -253,3 +254,5 @@ export const recurringTimeHelper = (sub) => {
   }
   return getTimespan(sub)
 }
+
+export const recurringFee = (trade) => `${Currency.formatFiat(((trade.sendAmount / 100) - (trade.inAmount / 100)))} ${prop('inCurrency', trade)}`