feature(create steps to add bank account)

blockchain · May 9, 2018 · e2eef6d · e2eef6d
1 parent 897ae02
commit e2eef6d
Show file tree

Hide file tree

Showing 7 changed files with 161 additions and 7 deletions.
diff --git a/...ages/blockchain-wallet-v4-frontend/src/modals/CoinifyExchangeData/AddBankDetails/index.js b/...ages/blockchain-wallet-v4-frontend/src/modals/CoinifyExchangeData/AddBankDetails/index.js
@@ -0,0 +1,63 @@
+import React from 'react'
+import { reduxForm, Field } from 'redux-form'
+import { FormattedMessage } from 'react-intl'
+import styled from 'styled-components'
+import { Button, Link, Text } from 'blockchain-info-components'
+
+import { flex, spacing } from 'services/StyleService'
+import { StepTransition } from 'components/Utilities/Stepper'
+import { Form, ColLeft, InputWrapper, PartnerHeader, PartnerSubHeader, ColRight, ColRightInner } from 'components/BuySell/Signup'
+import { TextBox } from 'components/Form'
+
+const CancelWrapper = styled.div`
+  a {
+    color: #545456;
+    font-weight: 300;
+    font-size: 14px;
+  }
+`
+const BorderBox = styled.div`
+  border: 1px solid ${props => props.theme['gray-1']};
+  padding: 30px;
+`
+
+const AddBankDetails = (props) => {
+  return (
+    <Form>
+      <ColLeft>
+        <BorderBox>
+          <InputWrapper style={spacing('mb-40')}>
+            <PartnerHeader>
+              <FormattedMessage id='coinifyexchangedata.addbankdetails.header' defaultMessage='Add Bank Account' />
+            </PartnerHeader>
+            <PartnerSubHeader>
+              <FormattedMessage id='coinifyexchangedata.addbankdetails.subheader' defaultMessage='Please enter your bank information below.' />
+            </PartnerSubHeader>
+            <Text weight={300} size='12px'>
+              <FormattedMessage id='coinifyexchangedata.addbankdetails.iban' defaultMessage='International Bank Account (IBAN)' />
+              <Field component={TextBox} />
+            </Text>
+            <Text weight={300} size='12px'>
+              <FormattedMessage id='coinifyexchangedata.addbankdetails.swift' defaultMessage='Bank Identifier Code (SWIFT/BIC)' />
+              <Field component={TextBox} />
+            </Text>
+          </InputWrapper>
+        </BorderBox>
+      </ColLeft>
+      <ColRight>
+        <ColRightInner>
+          <StepTransition next Component={Button} style={spacing('mt-45')} nature='primary' fullwidth>
+            <FormattedMessage id='coinifyexchangedata.addbankdetails.continue' defaultMessage='Continue' />
+          </StepTransition>
+          <CancelWrapper style={{ ...flex('row justify/center'), ...spacing('mt-15') }}>
+            <StepTransition prev Component={Link}>
+              <FormattedMessage id='back' defaultMessage='Back' />
+            </StepTransition>
+          </CancelWrapper>
+        </ColRightInner>
+      </ColRight>
+    </Form>
+  )
+}
+
+export default reduxForm({ form: 'coinifyAddBankDetails' })(AddBankDetails)
diff --git a/.../blockchain-wallet-v4-frontend/src/modals/CoinifyExchangeData/AddCustomerDetails/index.js b/.../blockchain-wallet-v4-frontend/src/modals/CoinifyExchangeData/AddCustomerDetails/index.js
@@ -0,0 +1,77 @@
+import React from 'react'
+import { reduxForm, Field } from 'redux-form'
+import { FormattedMessage } from 'react-intl'
+import styled from 'styled-components'
+import { Button, Link, Text } from 'blockchain-info-components'
+
+import { flex, spacing } from 'services/StyleService'
+import { StepTransition } from 'components/Utilities/Stepper'
+import { Form, ColLeft, InputWrapper, PartnerHeader, PartnerSubHeader, ColRight, ColRightInner, Row } from 'components/BuySell/Signup'
+import { TextBox } from 'components/Form'
+
+const CancelWrapper = styled.div`
+  a {
+    color: #545456;
+    font-weight: 300;
+    font-size: 14px;
+  }
+`
+const BorderBox = styled.div`
+  border: 1px solid ${props => props.theme['gray-1']};
+  padding: 30px;
+`
+
+const AddBankDetails = (props) => {
+  return (
+    <Form>
+      <ColLeft>
+        <BorderBox>
+          <InputWrapper style={spacing('mb-40')}>
+            <PartnerHeader>
+              <FormattedMessage id='coinifyexchangedata.addcustomerdetails.header' defaultMessage='Add Bank Account' />
+            </PartnerHeader>
+            <PartnerSubHeader>
+              <FormattedMessage id='coinifyexchangedata.addcustomerdetails.subheader' defaultMessage='Who owns this bank account?  This information should match the holder’s bank statement. ' />
+            </PartnerSubHeader>
+            <Text weight={300} size='12px'>
+              <FormattedMessage id='coinifyexchangedata.addcustomerdetails.fullname' defaultMessage='Account Holder’s Full Name' />
+              <Field component={TextBox} />
+            </Text>
+            <Text weight={300} size='12px'>
+              <FormattedMessage id='coinifyexchangedata.addcustomerdetails.street' defaultMessage='Street and Number' />
+              <Field component={TextBox} />
+            </Text>
+            <Row>
+              <Text weight={300} size='12px'>
+                <FormattedMessage id='coinifyexchangedata.addcustomerdetails.city' defaultMessage='City' />
+                <Field component={TextBox} />
+              </Text>
+              <Text weight={300} size='12px'>
+                <FormattedMessage id='coinifyexchangedata.addcustomerdetails.postcode' defaultMessage='Postal Code' />
+                <Field component={TextBox} />
+              </Text>
+            </Row>
+            <Text weight={300} size='12px'>
+              <FormattedMessage id='coinifyexchangedata.addcustomerdetails.country' defaultMessage='Country' />
+              <Field component={TextBox} />
+            </Text>
+          </InputWrapper>
+        </BorderBox>
+      </ColLeft>
+      <ColRight>
+        <ColRightInner>
+          <StepTransition next Component={Button} style={spacing('mt-45')} nature='primary' fullwidth>
+            <FormattedMessage id='coinifyexchangedata.addcustomerdetails.continue' defaultMessage='Continue' />
+          </StepTransition>
+          <CancelWrapper style={{ ...flex('row justify/center'), ...spacing('mt-15') }}>
+            <StepTransition prev Component={Link}>
+              <FormattedMessage id='back' defaultMessage='Back' />
+            </StepTransition>
+          </CancelWrapper>
+        </ColRightInner>
+      </ColRight>
+    </Form>
+  )
+}
+
+export default reduxForm({ form: 'coinifyAddBankDetails' })(AddBankDetails)
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/CoinifyExchangeData/index.js b/packages/blockchain-wallet-v4-frontend/src/modals/CoinifyExchangeData/index.js
@@ -10,6 +10,8 @@ import Order from './Order'
 import Payment from './Payment'
 import Confirm from './Confirm'
 import ISignThis from './ISignThis'
+import AddBankDetails from './AddBankDetails'
+import AddCustomerDetails from './AddCustomerDetails'
 import { ModalHeader, ModalBody } from 'blockchain-info-components'
 import { FormattedMessage } from 'react-intl'
 import { getData } from './selectors'
@@ -45,6 +47,8 @@ class SfoxExchangeData extends React.PureComponent {
       case 'order': return <Order />
       case 'payment': return <Payment />
       case 'confirm': return <Confirm />
+      case 'bankdetails': return <AddBankDetails />
+      case 'customerdetails': return <AddCustomerDetails />
     }
   }
 

diff --git a/...blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/OrderCheckout.js b/...blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/OrderCheckout.js
@@ -10,7 +10,7 @@ import { MethodContainer } from 'components/BuySell/styled.js'
 
 const OrderCheckout = ({ quoteR, rateQuoteR, account, onFetchQuote, reason, limits, type, defaultCurrency, symbol, checkoutBusy, busy, setMax, increaseLimit }) => {
   const quoteInputSpec = {
-    method: 'buy',
+    method: type, // buy or sell
     input: defaultCurrency,
     output: 'btc'
   }

diff --git a/...es/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/QuoteInput.js b/...es/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/QuoteInput.js
@@ -16,7 +16,7 @@ class QuoteInput extends Component {
     this.props.actions.initializeCheckoutForm()
   }
   render () {
-    let { data, symbol, setMax, checkoutError, increaseLimit, defaultCurrency, limits, disabled } = this.props
+    let { data, symbol, setMax, checkoutError, increaseLimit, defaultCurrency, limits, disabled, type } = this.props
 
     return data.cata({
       Success: (value) => <FiatConvertor
@@ -30,6 +30,7 @@ class QuoteInput extends Component {
         setMax={setMax}
         checkoutError={checkoutError}
         increaseLimit={increaseLimit}
+        type={type}
       />,
       Failure: (msg) => <div>Failure: {msg.error}</div>,
       Loading: () => <Loading />,

diff --git a/...chain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/QuoteInputTemplate.js b/...chain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/QuoteInputTemplate.js
@@ -82,7 +82,7 @@ const getLimitsError = (errorType, limits, symbol) => {
 }
 
 const FiatConvertor = (props) => {
-  const { val, disabled, setMax, limits, checkoutError, defaultCurrency, symbol, increaseLimit } = props
+  const { val, disabled, setMax, limits, checkoutError, defaultCurrency, symbol, increaseLimit, type } = props
   const { level } = val
   const currency = 'BTC'
 
@@ -107,8 +107,13 @@ const FiatConvertor = (props) => {
               { getLimitsError(checkoutError, limits, symbol) }
             </Error>
             : <LimitsHelper>
-              <FormattedMessage id='buy.quote_input.remaining_buy_limit' defaultMessage='Your remaining buy limit is {max}' values={{ max: <a onClick={() => setMax(limits.max)}>{symbol}{limits.max}</a> }} />
-              {level.name < 2 && <FormattedMessage id='buy.quote_input.increase_limits' defaultMessage='{increase}' values={{ increase: <a onClick={() => increaseLimit()}>Increase your limit.</a> }} />}
+              {type === 'buy'
+                ? <FormattedMessage id='buy.quote_input.remaining_buy_limit'
+                  defaultMessage='Your remaining buy limit is {max}' values={{ max: <a onClick={() => setMax(limits.max)}>{symbol}{limits.max}</a> }} />
+                : <FormattedMessage id='sell.quote_input.remaining_buy_limit'
+                  defaultMessage='Your remaining sell limit is {max}' values={{ max: <a onClick={() => setMax(limits.max)}>{symbol}{limits.max}</a> }} />
+              }
+              {level.name < 2 && <a onClick={() => increaseLimit()}><FormattedMessage id='quote_input.increase_limits' defaultMessage='Increase your limit.' /></a>}
             </LimitsHelper>
         }
       </Wrapper>

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
@@ -7,7 +7,8 @@ import * as service from 'services/CoinifyService'
 import Stepper, { StepView } from 'components/Utilities/Stepper'
 import OrderCheckout from '../OrderCheckout'
 import { OrderDetails, OrderSubmit } from '../OrderReview'
-import Payment from 'modals/CoinifyExchangeData/Payment'
+import AddBankDetails from 'modals/CoinifyExchangeData/AddBankDetails'
+import AddCustomerDetails from 'modals/CoinifyExchangeData/AddCustomerDetails'
 import ISignThis from 'modals/CoinifyExchangeData/ISignThis'
 
 const CheckoutWrapper = styled.div`
@@ -68,9 +69,12 @@ const Sell = props => {
           </CheckoutWrapper>
         </StepView>
         <StepView step={1}>
-          <Payment />
+          <AddBankDetails />
         </StepView>
         <StepView step={2}>
+          <AddCustomerDetails />
+        </StepView>
+        <StepView step={3}>
           <FlexRow>
             <CheckoutWrapper>
               <OrderDetails