feat(select accounts page outline)

blockchain · May 22, 2018 · 4cb1261 · 4cb1261
1 parent 4843d01
commit 4cb1261
Show file tree

Hide file tree

Showing 11 changed files with 68 additions and 24 deletions.
diff --git a/...allet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/AddBankDetails/index.js b/...allet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/AddBankDetails/index.js
@@ -4,18 +4,8 @@ import { connect } from 'react-redux'
 import AddBankDetails from './template.js'
 
 class AddBankDetailsContainer extends React.PureComponent {
-  constructor (props) {
-    super(props)
-    this.onSubmit = this.onSubmit.bind(this)
-  }
-
-  onSubmit (e) {
-    e.preventDefault()
-    // TODO: Store form data in the state
-  }
-
   render () {
-    return <AddBankDetails {...this.props} onSubmit={this.onSubmit} />
+    return <AddBankDetails {...this.props} />
   }
 }
 

diff --git a/...allet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/SelectAccounts/index.js b/...allet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/SelectAccounts/index.js
@@ -1,7 +1,9 @@
 import React from 'react'
 import { connect } from 'react-redux'
 
-import SelectAccounts from './template.js'
+import { getData } from './selectors.js'
+import Success from './template.success.js'
+import Loading from '../../../../template.loading'
 
 class SelectAccountsContainer extends React.PureComponent {
   constructor (props) {
@@ -15,11 +17,18 @@ class SelectAccountsContainer extends React.PureComponent {
   }
 
   render () {
-    return <SelectAccounts {...this.props} onSubmit={this.onSubmit} />
+    const { data } = this.props
+    return data.cata({
+      Success: (value) => <Success onSubmit={this.onSubmit} {...value} />,
+      Failure: (message) => <div>Failure: {message.error}</div>,
+      Loading: () => <Loading />,
+      NotAsked: () => <Loading />
+    })
   }
 }
 
 const mapStateToProps = (state) => ({
+  data: getData(state)
 })
 
 const mapDispatchToProps = (dispatch) => ({

diff --git a/...t-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/SelectAccounts/selectors.js b/...t-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/SelectAccounts/selectors.js
@@ -0,0 +1,8 @@
+import { lift } from 'ramda'
+
+import { selectors } from 'data'
+
+export const getData = (state) => {
+  const bankAccounts = selectors.core.data.coinify.getBankAccounts(state)
+  return lift(b => ({ bankAccounts: b }))(bankAccounts)
+}
diff --git a/...t/Content/Sell/SelectAccounts/template.js → ...t/Sell/SelectAccounts/template.success.js b/...t/Content/Sell/SelectAccounts/template.js → ...t/Sell/SelectAccounts/template.success.js
@@ -1,12 +1,14 @@
 import React from 'react'
-import { reduxForm } from 'redux-form'
+import { reduxForm, Field } from 'redux-form'
 import { FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
-import { Button, Link } from 'blockchain-info-components'
+import { path } from 'ramda'
+import { Button, Icon, Link, Text } from 'blockchain-info-components'
 
 import { spacing } from 'services/StyleService'
+import { CheckBox } from 'components/Form'
 import { StepTransition } from 'components/Utilities/Stepper'
-import { Form, ColLeft, InputWrapper, PartnerHeader, PartnerSubHeader, ColRight, ColRightInner } from 'components/BuySell/Signup'
+import { Form, ColLeft, InputWrapper, PartnerHeader, PartnerSubHeader, ColRight, ColRightInner, Row } from 'components/BuySell/Signup'
 
 const CancelWrapper = styled.div`
   display: flex;
@@ -24,7 +26,7 @@ const BorderBox = styled.div`
 `
 
 const SelectAccounts = (props) => {
-  const { invalid, submitting } = props
+  const { invalid, submitting, bankAccounts } = props
   return (
     <Form>
       <ColLeft>
@@ -36,6 +38,13 @@ const SelectAccounts = (props) => {
             <PartnerSubHeader>
               <FormattedMessage id='coinifyexchangedata.selectaccounts.subheader' defaultMessage='Where would you like your funds sent? You have the following bank accounts linked: ' />
             </PartnerSubHeader>
+            {bankAccounts && bankAccounts.map((b, index) =>
+              <Row>
+                <Field name={`iban${index}`} component={CheckBox} />
+                <Text weight={300} key={index}>{path(['_account', '_number'], b)}</Text>
+                <Icon name='trash' />
+              </Row>
+            )}
           </InputWrapper>
           <StepTransition next Component={Button} style={spacing('mt-45')} nature='primary' fullwidth disabled={submitting || invalid}>
             <FormattedMessage id='coinifyexchangedata.selectaccounts.continue' defaultMessage='Add new account' />

diff --git a/...es/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/index.js b/...es/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/index.js
@@ -24,7 +24,8 @@ class SellContainer extends React.Component {
   }
 
   render () {
-    const { data, modalActions, coinifyActions, coinifyDataActions, rateQuoteR, sellQuoteR, currency, paymentMedium, trade, ...rest } = this.props
+    const { data, modalActions, coinifyActions, coinifyDataActions,
+      rateQuoteR, sellQuoteR, currency, paymentMedium, trade, ...rest } = this.props
     const { step, checkoutBusy, coinifyBusy } = rest
     const { handleTrade, fetchQuote } = coinifyDataActions
     const { showModal } = modalActions
@@ -55,7 +56,7 @@ class SellContainer extends React.Component {
         busy={busy}
         clearTradeError={() => coinifyNotAsked()}
         trade={trade}
-        onOrderCheckoutSubmit={() => sellQuoteR.map(quote => this.props.coinifyDataActions.getPaymentMediums(quote))}
+        onOrderCheckoutSubmit={() => sellQuoteR.map(quote => this.props.coinifyDataActions.getMediumsWithBankAccounts(quote))}
       />,
       Failure: (msg) => <div>Failure: {msg.error}</div>,
       Loading: () => <Loading />,

diff --git a/...in-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/template.success.js b/...in-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/template.success.js
@@ -9,6 +9,7 @@ import OrderCheckout from '../OrderCheckout'
 import { OrderDetails, OrderSubmit } from '../OrderReview'
 import AddBankDetails from './AddBankDetails'
 import AddCustomerDetails from './AddCustomerDetails'
+import SelectAccounts from './SelectAccounts'
 import ISignThis from 'modals/CoinifyExchangeData/ISignThis'
 
 const CheckoutWrapper = styled.div`
@@ -73,12 +74,15 @@ const Sell = props => {
           </CheckoutWrapper>
         </StepView>
         <StepView step={1}>
-          <AddBankDetails quoteR={sellQuoteR} />
+          <SelectAccounts />
         </StepView>
         <StepView step={2}>
-          <AddCustomerDetails />
+          <AddBankDetails quoteR={sellQuoteR} />
         </StepView>
         <StepView step={3}>
+          <AddCustomerDetails />
+        </StepView>
+        <StepView step={4}>
           <FlexRow>
             <CheckoutWrapper>
               <OrderDetails

diff --git a/packages/blockchain-wallet-v4/src/redux/data/coinify/actionTypes.js b/packages/blockchain-wallet-v4/src/redux/data/coinify/actionTypes.js
@@ -56,6 +56,8 @@ export const COINIFY_GET_MEDIUM_ACCOUNTS_LOADING = '@CORE.COINIFY_GET_MEDIUM_ACC
 export const COINIFY_GET_MEDIUM_ACCOUNTS_SUCCESS = '@CORE.COINIFY_GET_MEDIUM_ACCOUNTS_SUCCESS'
 export const COINIFY_GET_MEDIUM_ACCOUNTS_FAILURE = '@CORE.COINIFY_GET_MEDIUM_ACCOUNTS_FAILURE'
 
+export const COINIFY_GET_BANK_ACCOUNTS = '@CORE.COINIFY_GET_BANK_ACCOUNTS'
+
 export const COINIFY_ADD_BANK_ACCOUNT = '@CORE.COINIFY_ADD_BANK_ACCOUNT'
 export const COINIFY_ADD_BANK_ACCOUNT_FAILURE = '@CORE.COINIFY_ADD_BANK_ACCOUNT_FAILURE'
 export const COINIFY_ADD_BANK_ACCOUNT_LOADING = '@CORE.COINIFY_ADD_BANK_ACCOUNT_LOADING'

diff --git a/packages/blockchain-wallet-v4/src/redux/data/coinify/actions.js b/packages/blockchain-wallet-v4/src/redux/data/coinify/actions.js
@@ -56,6 +56,8 @@ export const getMediumAccountsLoading = () => ({ type: AT.COINIFY_GET_MEDIUM_ACC
 export const getMediumAccountsSuccess = (accounts) => ({ type: AT.COINIFY_GET_MEDIUM_ACCOUNTS_SUCCESS, payload: accounts })
 export const getMediumAccountsFailure = (error) => ({ type: AT.COINIFY_GET_MEDIUM_ACCOUNTS_FAILURE, payload: error })
 
+export const getMediumsWithBankAccounts = (accounts) => ({ type: AT.COINIFY_GET_BANK_ACCOUNTS, payload: accounts })
+
 export const addBankAccount = (medium, account) => ({ type: AT.COINIFY_ADD_BANK_ACCOUNT, payload: { medium, account } })
 export const addBankAccountFailure = (error) => ({ type: AT.COINIFY_ADD_BANK_ACCOUNT_FAILURE, payload: error })
 export const addBankAccountLoading = () => ({ type: AT.COINIFY_ADD_BANK_ACCOUNT_LOADING })

diff --git a/packages/blockchain-wallet-v4/src/redux/data/coinify/sagaRegister.js b/packages/blockchain-wallet-v4/src/redux/data/coinify/sagaRegister.js
@@ -16,6 +16,7 @@ export default ({ api, options }) => {
     yield takeLatest(AT.RESET_PROFILE, coinifySagas.resetProfile)
     yield takeLatest(AT.COINIFY_GET_PAYMENT_MEDIUMS, coinifySagas.getPaymentMediums)
     yield takeLatest(AT.COINIFY_GET_MEDIUM_ACCOUNTS, coinifySagas.getMediumAccounts)
+    yield takeLatest(AT.COINIFY_GET_BANK_ACCOUNTS, coinifySagas.getMediumsWithBankAccounts)
     yield takeLatest(AT.COINIFY_ADD_BANK_ACCOUNT, coinifySagas.addBankAccount)
     yield takeLatest(AT.COINIFY_FETCH_QUOTE_AND_MEDIUMS, coinifySagas.fetchQuoteAndMediums)
     yield takeLatest(AT.COINIFY_CANCEL_TRADE, coinifySagas.cancelTrade)

diff --git a/packages/blockchain-wallet-v4/src/redux/data/coinify/sagas.js b/packages/blockchain-wallet-v4/src/redux/data/coinify/sagas.js
@@ -5,7 +5,7 @@ import * as S from './selectors'
 import * as buySellSelectors from '../../kvStore/buySell/selectors'
 import { coinifyService } from '../../../exchange/service'
 import * as buySellA from '../../kvStore/buySell/actions'
-import { sort } from 'ramda'
+import { prop, sort } from 'ramda'
 
 export default ({ api, options }) => {
   const getCoinify = function * () {
@@ -126,8 +126,8 @@ export default ({ api, options }) => {
   }
 
   const getPaymentMediums = function * (data) {
-    const quote = data.payload
     try {
+      const quote = data.payload
       yield put(A.getPaymentMediumsLoading())
       const mediums = yield apply(quote, quote.getPaymentMediums)
       yield put(A.getPaymentMediumsSuccess(mediums))
@@ -137,15 +137,30 @@ export default ({ api, options }) => {
   }
 
   const getMediumAccounts = function * (data) {
-    const medium = data.payload
     try {
+      const medium = data.payload
       const account = yield apply(medium, medium.getAccounts)
       yield put(A.getMediumAccountsSuccess(account))
     } catch (e) {
       yield put(A.getMediumAccountsFailure(e))
     }
   }
 
+  // Used in sell to get mediums with accounts
+  const getMediumsWithBankAccounts = function * (data) {
+    try {
+      const quote = data.payload
+      yield put(A.getPaymentMediumsLoading())
+      const mediums = yield apply(quote, quote.getPaymentMediums)
+      const medium = prop('bank', mediums)
+      yield apply(medium, medium.getBankAccounts)
+      yield put(A.getPaymentMediumsSuccess(mediums))
+    } catch (e) {
+      console.log(e)
+      yield put(A.getPaymentMediumsFailure(e))
+    }
+  }
+
   const addBankAccount = function * (data) {
     try {
       const { medium, account } = data.payload
@@ -277,6 +292,7 @@ export default ({ api, options }) => {
     resetProfile,
     getPaymentMediums,
     getMediumAccounts,
+    getMediumsWithBankAccounts,
     addBankAccount,
     fetchQuoteAndMediums,
     cancelTrade,

diff --git a/packages/blockchain-wallet-v4/src/redux/data/coinify/selectors.js b/packages/blockchain-wallet-v4/src/redux/data/coinify/selectors.js
@@ -34,3 +34,5 @@ export const canTrade = state => getProfile(state).map(path(['_canTrade']))
 export const cannotTradeReason = state => getProfile(state).map(path(['_cannotTradeReason']))
 
 export const getSortedKycs = path([dataPath, 'coinify', 'kycs'])
+
+export const getBankAccounts = state => getMediums(state).map(path(['bank', '_accounts']))