feat(confirm bank account deletion)

packages/blockchain-wallet-v4-frontend/src/modals/CoinifyDeleteBank/index.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators, compose } from 'redux'
+import { actions } from 'data'
+import modalEnhancer from 'providers/ModalEnhancer'
+import CoinifyDeleteBank from './template.js'
+
+class CoinifyDeleteBankContainer extends React.PureComponent {
+  constructor (props) {
+    super(props)
+    this.handleSubmit = this.handleSubmit.bind(this)
+  }
+
+  handleSubmit () {
+    this.props.close()
+    this.props.coinifyActions.deleteBankAccount(this.props.bankAccount)
+  }
+
+  render () {
+    return <CoinifyDeleteBank {...this.props} handleSubmit={this.handleSubmit} />
+  }
+}
+
+const mapDispatchToProps = (dispatch) => ({
+  coinifyActions: bindActionCreators(actions.modules.coinify, dispatch)
+})
+
+const enhance = compose(
+  modalEnhancer('CoinifyDeleteBank'),
+  connect(undefined, mapDispatchToProps)
+)
+
+export default enhance(CoinifyDeleteBankContainer)

packages/blockchain-wallet-v4-frontend/src/modals/CoinifyDeleteBank/template.js

@@ -0,0 +1,32 @@
+import React from 'react'
+import { FormattedMessage } from 'react-intl'
+
+import { Button, Link, Modal, ModalHeader, ModalBody, ModalFooter, Text } from 'blockchain-info-components'
+
+const CoinifyDeleteBank = (props) => {
+  const { close, position, total, ...rest } = props
+  const { handleSubmit } = rest
+
+  return (
+    <Modal size='large' position={position} total={total}>
+      <ModalHeader onClose={close}>
+        <FormattedMessage id='modals.coinifydeletebank.title' defaultMessage='Delete bank Account?' />
+      </ModalHeader>
+      <ModalBody>
+        <Text size='14px' weight={300}>
+          <FormattedMessage id='modals.coinifydeletebank.explain' defaultMessage='Are you sure you want to delete this bank account?' />
+        </Text>
+      </ModalBody>
+      <ModalFooter align='spaced'>
+        <Link size='13px' weight={300} onClick={close}>
+          <FormattedMessage id='modals.coinifydeletebank.cancel' defaultMessage='Cancel' />
+        </Link>
+        <Button onClick={handleSubmit} nature='logout'>
+          <FormattedMessage id='modals.coinifydeletebank.logout' defaultMessage='Delete' />
+        </Button>
+      </ModalFooter>
+    </Modal>
+  )
+}
+
+export default CoinifyDeleteBank

packages/blockchain-wallet-v4-frontend/src/modals/index.js

@@ -2,6 +2,7 @@ import React from 'react'
 
 import AddBitcoinWallet from './AddBitcoinWallet'
 import AutoDisconnection from './AutoDisconnection'
+import CoinifyDeleteBank from './CoinifyDeleteBank'
 import CoinifyExchangeData from './CoinifyExchangeData'
 import CoinifyTradeDetails from './CoinifyTradeDetails'
 import ConfirmDisable2FA from './ConfirmDisable2FA'
@@ -42,6 +43,7 @@ const Modals = props => (
   <div>
     <AddBitcoinWallet />
     <AutoDisconnection />
+    <CoinifyDeleteBank />
     <CoinifyExchangeData />
     <CoinifyTradeDetails />
     <ConfirmDisable2FA />

packages/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/SelectAccounts/index.js

@@ -20,7 +20,7 @@ class SelectAccountsContainer extends React.PureComponent {
   }
 
   deleteBankAccount (bankAccount) {
-    this.props.coinifyActions.deleteBankAccount(bankAccount)
+    this.props.modalActions.showModal('CoinifyDeleteBank', { bankAccount })
   }
 
   render () {
@@ -42,8 +42,8 @@ class SelectAccountsContainer extends React.PureComponent {
 const mapStateToProps = (state) => getData(state)
 
 const mapDispatchToProps = (dispatch) => ({
-  coinifyActions: bindActionCreators(actions.modules.coinify, dispatch),
-  coinifyDataActions: bindActionCreators(actions.core.data.coinify, dispatch)
+  coinifyDataActions: bindActionCreators(actions.core.data.coinify, dispatch),
+  modalActions: bindActionCreators(actions.modals, dispatch)
 })
 
 export default connect(mapStateToProps, mapDispatchToProps)(SelectAccountsContainer)