feat(coinfy bank account selection)

blockchain · May 23, 2018 · aaf7829 · aaf7829
1 parent a14a464
commit aaf7829
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 12 deletions.
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
@@ -20,17 +20,17 @@ class SelectAccountsContainer extends React.PureComponent {
   }
 
   deleteBankAccount (bankAccount) {
-    console.log(bankAccount)
     this.props.coinifyActions.deleteBankAccount(bankAccount)
   }
 
   render () {
-    const { data } = this.props
+    const { data, radioButtonSelected } = this.props
     return data.cata({
       Success: (value) =>
         <Success
           onSubmit={this.onSubmit}
           deleteBankAccount={this.deleteBankAccount}
+          radioButtonSelected={radioButtonSelected}
           {...value} />,
       Failure: (message) => <div>Failure: {message.error}</div>,
       Loading: () => <Loading />,
@@ -39,9 +39,7 @@ class SelectAccountsContainer extends React.PureComponent {
   }
 }
 
-const mapStateToProps = (state) => ({
-  data: getData(state)
-})
+const mapStateToProps = (state) => getData(state)
 
 const mapDispatchToProps = (dispatch) => ({
   coinifyActions: bindActionCreators(actions.modules.coinify, 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
@@ -1,8 +1,12 @@
 import { lift } from 'ramda'
+import { formValueSelector } from 'redux-form'
 
 import { selectors } from 'data'
 
 export const getData = (state) => {
   const bankAccounts = selectors.core.data.coinify.getBankAccounts(state)
-  return lift(b => ({ bankAccounts: b }))(bankAccounts)
+  return {
+    data: lift(b => ({ bankAccounts: b }))(bankAccounts),
+    radioButtonSelected: formValueSelector('radioButtonSelected')(state, 'iban')
+  }
 }
diff --git a/...ontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/SelectAccounts/template.success.js b/...ontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/SelectAccounts/template.success.js
@@ -2,11 +2,11 @@ import React from 'react'
 import { reduxForm, Field } from 'redux-form'
 import { FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
-import { path } from 'ramda'
+import { equals, isNil, or, path } from 'ramda'
 import { Button, Icon, Link, Text } from 'blockchain-info-components'
 
 import { spacing } from 'services/StyleService'
-import { CheckBox } from 'components/Form'
+import { RadioButton } from 'components/Form'
 import { StepTransition } from 'components/Utilities/Stepper'
 import { Form, ColLeft, InputWrapper, PartnerHeader, PartnerSubHeader, ColRight, ColRightInner, Row } from 'components/BuySell/Signup'
 
@@ -29,7 +29,9 @@ const ClickableIcon = styled(Icon)`
 `
 
 const SelectAccounts = (props) => {
-  const { invalid, submitting, bankAccounts, deleteBankAccount } = props
+  const { invalid, submitting, bankAccounts, deleteBankAccount, radioButtonSelected } = props
+  const noRadioButtonSelected = or(isNil(radioButtonSelected), equals(radioButtonSelected, ''))
+
   return (
     <Form>
       <ColLeft>
@@ -43,7 +45,7 @@ const SelectAccounts = (props) => {
             </PartnerSubHeader>
             {bankAccounts && bankAccounts.map((b, index) =>
               <Row key={index}>
-                <Field name={`iban${index}`} component={CheckBox} />
+                <Field name='iban' component={RadioButton} props={{ id: `iban${index}`, value: index }} />
                 <Text weight={300}>{path(['_account', '_number'], b)}</Text>
                 <ClickableIcon name='trash' onClick={() => deleteBankAccount(b)} />
               </Row>
@@ -56,7 +58,8 @@ const SelectAccounts = (props) => {
       </ColLeft>
       <ColRight>
         <ColRightInner>
-          <StepTransition next Component={Button} style={spacing('mt-45')} nature='primary' fullwidth disabled={submitting || invalid}>
+          <StepTransition next Component={Button} style={spacing('mt-45')} nature='primary'
+            fullwidth disabled={submitting || invalid || noRadioButtonSelected}>
             <FormattedMessage id='coinifyexchangedata.selectaccounts.continue' defaultMessage='Continue' />
           </StepTransition>
           <CancelWrapper style={spacing('mt-15')}>
@@ -70,4 +73,4 @@ const SelectAccounts = (props) => {
   )
 }
 
-export default reduxForm({ form: 'coinifySelectAccounts' })(SelectAccounts)
+export default reduxForm({ form: 'radioButtonSelected' })(SelectAccounts)