From 4cdc73cfcacfc612d3616e39a1c2e9eaacaea5f5 Mon Sep 17 00:00:00 2001 From: Philip Welber Date: Mon, 11 Jun 2018 13:20:56 -0400 Subject: [PATCH] feat(Coinify): adds next recurring trade component for checkout --- .../src/modals/CoinifyTradeDetails/Trade.js | 4 +- .../CoinifyCheckout/Content/Buy/index.js | 4 +- .../CoinifyCheckout/Content/Buy/selectors.js | 8 +-- .../Content/Buy/template.success.js | 15 ++++- .../Content/NextSubscription.js | 67 +++++++++++++++++++ .../src/services/CoinifyService/index.js | 3 + 6 files changed, 87 insertions(+), 14 deletions(-) create mode 100644 packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/NextSubscription.js diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/CoinifyTradeDetails/Trade.js b/packages/blockchain-wallet-v4-frontend/src/modals/CoinifyTradeDetails/Trade.js index e66eaee3ddf..2cc7b8274b6 100644 --- 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/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Buy/index.js b/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Buy/index.js index 41fc388060d..1f3d075104d 100644 --- a/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Buy/index.js +++ b/packages/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) =>
Failure: {msg.error}
, Loading: () => , diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Buy/selectors.js b/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Buy/selectors.js index 409ec6a331c..579213bc110 100644 --- a/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Buy/selectors.js +++ b/packages/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/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Buy/template.success.js b/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Buy/template.success.js index 0cfca9f73d0..24391d61055 100644 --- a/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Buy/template.success.js +++ b/packages/blockchain-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 => { /> + { + activeSubscriptions.length > 0 + ? t.tradeSubscriptionId)} manageOrder={() => changeTab('order_history')} /> + : null + } { path(['kycs', 'length'], value) && path(['state'], kyc) ? handleKycAction(kyc)} canTrade={canTrade} /> diff --git a/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/NextSubscription.js b/packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/NextSubscription.js new file mode 100644 index 00000000000..297efbcd522 --- /dev/null +++ b/packages/blockchain-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 ( + + + + + + + + + + {`${Currency.formatFiat(prop('inAmount', nextTrade) / 100)} ${prop('inCurrency', nextTrade)} (+ ${recurringFee(nextTrade)} Payment Fee)`} + + + + + + + + {} + + + + + + + + + ) +} + +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 index 6deb15c3d24..814afad2fb5 100644 --- 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)}`