feat(coinify bank account deletion)

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

Hide file tree

Showing 8 changed files with 54 additions and 14 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/modules/coinify/actionTypes.js b/packages/blockchain-wallet-v4-frontend/src/data/modules/coinify/actionTypes.js
@@ -36,3 +36,5 @@ export const COINIFY_FROM_ISX = '@COMPONENT.COINIFY_FROM_ISX'
 export const COINIFY_TRIGGER_KYC = '@COMPONENT.COINIFY_TRIGGER_KYC'
 
 export const OPEN_KYC = '@COMPONENT.OPEN_KYC'
+
+export const COINIFY_DELETE_BANK_ACCOUNT = '@COMPONENT.COINIFY_DELETE_BANK_ACCOUNT'
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/modules/coinify/actions.js b/packages/blockchain-wallet-v4-frontend/src/data/modules/coinify/actions.js
@@ -39,3 +39,5 @@ export const fromISX = (state) => ({ type: AT.COINIFY_FROM_ISX, payload: state }
 export const triggerKYC = () => ({ type: AT.COINIFY_TRIGGER_KYC })
 
 export const openKYC = (kyc) => ({ type: AT.OPEN_KYC, payload: kyc })
+
+export const deleteBankAccount = (account) => ({ type: AT.COINIFY_DELETE_BANK_ACCOUNT, payload: account })
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/modules/coinify/sagaRegister.js b/packages/blockchain-wallet-v4-frontend/src/data/modules/coinify/sagaRegister.js
@@ -18,5 +18,6 @@ export default ({ coreSagas }) => {
     yield takeLatest(AT.COINIFY_FROM_ISX, coinifySagas.fromISX)
     yield takeLatest(AT.COINIFY_TRIGGER_KYC, coinifySagas.triggerKYC)
     yield takeLatest(AT.OPEN_KYC, coinifySagas.openKYC)
+    yield takeLatest(AT.COINIFY_DELETE_BANK_ACCOUNT, coinifySagas.deleteBankAccount)
   }
 }
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/modules/coinify/sagas.js b/packages/blockchain-wallet-v4-frontend/src/data/modules/coinify/sagas.js
@@ -211,16 +211,27 @@ export default ({ coreSagas }) => {
     }
   }
 
+  const deleteBankAccount = function * (payload) {
+    try {
+      yield call(coreSagas.data.coinify.deleteBankAccount, payload)
+      const quote = yield select(selectors.core.data.coinify.getQuote)
+      yield put(actions.core.data.coinify.getMediumsWithBankAccounts(quote.data))
+    } catch (e) {
+      yield put(actions.logs.logErrorMessage(logLocation, 'deleteBankAccount', e))
+    }
+  }
+
   return {
-    handleChange,
-    initialized,
     buy,
-    sell,
     coinifySaveMedium,
     coinifySignup,
+    deleteBankAccount,
     fromISX,
-    triggerKYC,
+    handleChange,
+    initialized,
     openKYC,
-    setMinMax
+    sell,
+    setMinMax,
+    triggerKYC
   }
 }
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,13 +1,16 @@
 import React from 'react'
+import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 
+import { actions } from 'data'
 import { getData } from './selectors.js'
 import Success from './template.success.js'
 import Loading from '../../../../template.loading'
 
 class SelectAccountsContainer extends React.PureComponent {
   constructor (props) {
     super(props)
+    this.deleteBankAccount = this.deleteBankAccount.bind(this)
     this.onSubmit = this.onSubmit.bind(this)
   }
 
@@ -16,10 +19,19 @@ class SelectAccountsContainer extends React.PureComponent {
     // TODO: Store form data in the state
   }
 
+  deleteBankAccount (bankAccount) {
+    console.log(bankAccount)
+    this.props.coinifyActions.deleteBankAccount(bankAccount)
+  }
+
   render () {
     const { data } = this.props
     return data.cata({
-      Success: (value) => <Success onSubmit={this.onSubmit} {...value} />,
+      Success: (value) =>
+        <Success
+          onSubmit={this.onSubmit}
+          deleteBankAccount={this.deleteBankAccount}
+          {...value} />,
       Failure: (message) => <div>Failure: {message.error}</div>,
       Loading: () => <Loading />,
       NotAsked: () => <Loading />
@@ -32,6 +44,7 @@ const mapStateToProps = (state) => ({
 })
 
 const mapDispatchToProps = (dispatch) => ({
+  coinifyActions: bindActionCreators(actions.modules.coinify, dispatch)
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(SelectAccountsContainer)
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
@@ -24,9 +24,12 @@ const BorderBox = styled.div`
   border: 1px solid ${props => props.theme['gray-1']};
   padding: 30px;
 `
+const ClickableIcon = styled(Icon)`
+  cursor: pointer;
+`
 
 const SelectAccounts = (props) => {
-  const { invalid, submitting, bankAccounts } = props
+  const { invalid, submitting, bankAccounts, deleteBankAccount } = props
   return (
     <Form>
       <ColLeft>
@@ -39,10 +42,10 @@ const SelectAccounts = (props) => {
               <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>
+              <Row key={index}>
                 <Field name={`iban${index}`} component={CheckBox} />
-                <Text weight={300} key={index}>{path(['_account', '_number'], b)}</Text>
-                <Icon name='trash' />
+                <Text weight={300}>{path(['_account', '_number'], b)}</Text>
+                <ClickableIcon name='trash' onClick={() => deleteBankAccount(b)} />
               </Row>
             )}
           </InputWrapper>

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,7 +56,7 @@ 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 getMediumsWithBankAccounts = (quote) => ({ type: AT.COINIFY_GET_BANK_ACCOUNTS, payload: quote })
 
 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 })

diff --git a/packages/blockchain-wallet-v4/src/redux/data/coinify/sagas.js b/packages/blockchain-wallet-v4/src/redux/data/coinify/sagas.js
@@ -164,16 +164,23 @@ export default ({ api, options }) => {
   const addBankAccount = function * (data) {
     try {
       const { medium, account } = data.payload
-      const bankAccount = yield apply(medium, medium.addBankAccount, [account])
-      console.log(bankAccount)
-      console.log('A bank account was added')
+      yield apply(medium, medium.addBankAccount, [account])
       // yield put(A.addBankAccountSuccess(bankAccount))
     } catch (e) {
       console.log(e)
       // yield put(A.addBankAccountFailure(e))
     }
   }
 
+  const deleteBankAccount = function * (data) {
+    try {
+      const account = data.payload
+      yield apply(account, account.delete)
+    } catch (e) {
+      console.log(e)
+    }
+  }
+
   const signup = function * () {
     const countryCode = 'FR' // TODO should be passed in
     const fiatCurrency = 'EUR' // TODO should be passed in
@@ -294,6 +301,7 @@ export default ({ api, options }) => {
     getMediumAccounts,
     getMediumsWithBankAccounts,
     addBankAccount,
+    deleteBankAccount,
     fetchQuoteAndMediums,
     cancelTrade,
     triggerKYC,