feature(create selectaccounts page)

blockchain · May 11, 2018 · 49b8b65 · 49b8b65
1 parent b8c4589
commit 49b8b65
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 0 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
@@ -0,0 +1,28 @@
+import React from 'react'
+import { connect } from 'react-redux'
+
+import SelectAccounts from './template.js'
+
+class SelectAccountsContainer 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 <SelectAccounts {...this.props} onSubmit={this.onSubmit} />
+  }
+}
+
+const mapStateToProps = (state) => ({
+})
+
+const mapDispatchToProps = (dispatch) => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(SelectAccountsContainer)
diff --git a/...et-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/SelectAccounts/template.js b/...et-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/SelectAccounts/template.js
@@ -0,0 +1,61 @@
+import React from 'react'
+import { reduxForm } from 'redux-form'
+import { FormattedMessage } from 'react-intl'
+import styled from 'styled-components'
+import { Button, Link } from 'blockchain-info-components'
+
+import { spacing } from 'services/StyleService'
+import { StepTransition } from 'components/Utilities/Stepper'
+import { Form, ColLeft, InputWrapper, PartnerHeader, PartnerSubHeader, ColRight, ColRightInner } from 'components/BuySell/Signup'
+
+const CancelWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  a {
+    color: #545456;
+    font-weight: 300;
+    font-size: 14px;
+  }
+`
+const BorderBox = styled.div`
+  border: 1px solid ${props => props.theme['gray-1']};
+  padding: 30px;
+`
+
+const SelectAccounts = (props) => {
+  const { invalid, submitting } = props
+  return (
+    <Form>
+      <ColLeft>
+        <BorderBox>
+          <InputWrapper style={spacing('mb-40')}>
+            <PartnerHeader>
+              <FormattedMessage id='coinifyexchangedata.selectaccounts.header' defaultMessage='Select Accounts' />
+            </PartnerHeader>
+            <PartnerSubHeader>
+              <FormattedMessage id='coinifyexchangedata.selectaccounts.subheader' defaultMessage='Where would you like your funds sent? You have the following bank accounts linked: ' />
+            </PartnerSubHeader>
+          </InputWrapper>
+          <StepTransition next Component={Button} style={spacing('mt-45')} nature='primary' fullwidth disabled={submitting || invalid}>
+            <FormattedMessage id='coinifyexchangedata.selectaccounts.continue' defaultMessage='Add new account' />
+          </StepTransition>
+        </BorderBox>
+      </ColLeft>
+      <ColRight>
+        <ColRightInner>
+          <StepTransition next Component={Button} style={spacing('mt-45')} nature='primary' fullwidth disabled={submitting || invalid}>
+            <FormattedMessage id='coinifyexchangedata.selectaccounts.continue' defaultMessage='Continue' />
+          </StepTransition>
+          <CancelWrapper style={spacing('mt-15')}>
+            <StepTransition prev Component={Link}>
+              <FormattedMessage id='back' defaultMessage='Back' />
+            </StepTransition>
+          </CancelWrapper>
+        </ColRightInner>
+      </ColRight>
+    </Form>
+  )
+}
+
+export default reduxForm({ form: 'coinifySelectAccounts' })(SelectAccounts)