feat(denmark account support. Misc UI improvements)

blockchain · May 30, 2018 · a4a1c8f · a4a1c8f
1 parent 10cf915
commit a4a1c8f
Show file tree

Hide file tree

Showing 11 changed files with 124 additions and 99 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/BuySell/Signup/index.js b/packages/blockchain-wallet-v4-frontend/src/components/BuySell/Signup/index.js
@@ -83,3 +83,15 @@ export const EmailHelper = styled.span`
     color: ${props => props.theme['brand-secondary']};
   }
 `
+
+export const CancelWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 15px;
+  a {
+    color: #545456;
+    font-weight: 300;
+    font-size: 14px;
+  }
+`
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Form/SelectBoxCoinifyCurrency/index.js b/packages/blockchain-wallet-v4-frontend/src/components/Form/SelectBoxCoinifyCurrency/index.js
@@ -28,7 +28,6 @@ const mapStateToProps = (state, ownProps) => ({
   currencies: [
     { text: 'EUR', value: 'EUR' },
     { text: 'DKK', value: 'DKK' },
-    { text: 'USD', value: 'USD' },
     { text: 'GBP', value: 'GBP' }
   ]
 })

diff --git a/.../blockchain-wallet-v4-frontend/src/modals/CoinifyExchangeData/Payment/template.success.js b/.../blockchain-wallet-v4-frontend/src/modals/CoinifyExchangeData/Payment/template.success.js
@@ -3,27 +3,21 @@ import PropTypes from 'prop-types'
 import { reduxForm } from 'redux-form'
 import { FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
-import { flex, spacing } from 'services/StyleService'
+import { spacing } from 'services/StyleService'
 import Helper from 'components/BuySell/FAQ'
 import { StepTransition } from 'components/Utilities/Stepper'
 import { path } from 'ramda'
 
 import { Button, HeartbeatLoader, Link } from 'blockchain-info-components'
-import { Form, ColLeft, InputWrapper, PartnerHeader, PartnerSubHeader, ColRight, ColRightInner } from 'components/BuySell/Signup'
+import { Form, CancelWrapper, ColLeft, ColRight, ColRightInner, InputWrapper, PartnerHeader, PartnerSubHeader } from 'components/BuySell/Signup'
 
 import { cardOptionHelper, bankOptionHelper } from './mediumHelpers'
 
 const PaymentWrapper = styled.div`
   display: flex;
   flex-direction: row;
 `
-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;
@@ -81,7 +75,7 @@ const Payment = (props) => {
                 { busyHelper(busy) }
               </StepTransition>
           }
-          <CancelWrapper style={{ ...flex('row justify/center'), ...spacing('mt-15') }}>
+          <CancelWrapper>
             <StepTransition prev Component={Link}>
               <FormattedMessage id='cancel' defaultMessage='Cancel' />
             </StepTransition>

diff --git a/...s/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/OrderReview.js b/...s/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/OrderReview.js
@@ -9,6 +9,7 @@ import { spacing } from 'services/StyleService'
 import { reviewOrder, currencySymbolMap } from 'services/CoinifyService'
 import { FormattedMessage } from 'react-intl'
 import { OrderDetailsTable, OrderDetailsRow } from 'components/BuySell/OrderDetails'
+import { CancelWrapper } from 'components/BuySell/Signup'
 import { StepTransition } from 'components/Utilities/Stepper'
 
 const ExchangeRateWrapper = styled.div`
@@ -22,17 +23,6 @@ const StyledFaqRow = styled(FaqRow)`
   padding: 20px 0px;
   border-bottom: 1px solid ${props => props.theme['gray-1']};
 `
-const CancelWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  margin-top: 15px;
-  a {
-    color: #545456;
-    font-weight: 300;
-    font-size: 14px;
-  }
-`
 
 const renderRate = (rate, q) => {
   return <FormattedMessage id='rate' defaultMessage='{rate}'
@@ -126,7 +116,13 @@ export const OrderSubmit = ({ quoteR, onSubmit, busy, clearTradeError, goToStep
     }
     <StyledFaqRow
       title={<FormattedMessage id='faq.how_long_to_receive_q' defaultMessage='How long does it take to get my funds?' />}
-      description={<FormattedMessage id='faq.how_long_to_receive_a' defaultMessage='A bitcoin is never late, nor is it early. A bitcoin arrives precisely when it intends to.' />}
+      description={
+        <div>
+          <FormattedMessage id='faq.how_long_to_receive_a1' defaultMessage='The quote expires within 15 minutes of placing the order. If the transaction is not broadcasted during that time the order will not be processed.' />
+          <FormattedMessage id='faq.how_long_to_receive_a2' defaultMessage='Coinify will contact you with intructions on how to receive a BTC refund if they are received after the quote expires, and if the amount received is higher or lower that the one specified in the order.' />
+          <FormattedMessage id='faq.how_long_to_receive_a3' defaultMessage='Coinify won’t be refunding the bitcoin transaction fee.' />
+        </div>
+      }
     />
     <StyledFaqRow
       title={<FormattedMessage id='faq.exchange_rate_q' defaultMessage='What is the exchange rate?' />}

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
@@ -115,7 +115,9 @@ const FiatConvertor = (props) => {
           <a onClick={() => setMax(limits.max)}>{symbol}{limits.max}</a>
           {
             level.name < 2 && kyc.state !== 'reviewing'
-              ? <FormattedMessage id='buysell.quote_input.increase_limits' defaultMessage='{increase}' values={{ increase: <a onClick={() => increaseLimit()}>Increase your limit.</a> }} />
+              ? <a onClick={() => increaseLimit()}>
+                <FormattedMessage id='buysell.quote_input.increase_limits' defaultMessage=' Increase your limit.' />
+              </a>
               : null
           }
         </LimitsHelper>

diff --git a/...allet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/AddBankDetails/index.js b/...allet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/AddBankDetails/index.js
@@ -1,11 +1,24 @@
 import React from 'react'
+import { connect } from 'react-redux'
 
+import Loading from 'components/BuySell/Loading'
+import { getData } from './selectors'
 import AddBankDetails from './template.js'
 
 class AddBankDetailsContainer extends React.PureComponent {
   render () {
-    return <AddBankDetails {...this.props} />
+    const { data } = this.props
+    return data.cata({
+      Success: (value) => <AddBankDetails quote={value} />,
+      Loading: <Loading />,
+      NotAsked: <div>Not Asked</div>,
+      Failure: (error) => <div>Failure: {error && error.message}</div>
+    })
   }
 }
 
-export default AddBankDetailsContainer
+const mapStateToProps = (state) => ({
+  data: getData(state)
+})
+
+export default connect(mapStateToProps)(AddBankDetailsContainer)
diff --git a/...t-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/AddBankDetails/selectors.js b/...t-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/AddBankDetails/selectors.js
@@ -0,0 +1,3 @@
+import { selectors } from 'data'
+
+export const getData = (state) => selectors.core.data.coinify.getQuote(state)
diff --git a/...et-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/AddBankDetails/template.js b/...et-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/AddBankDetails/template.js
@@ -2,20 +2,20 @@ 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 { equals, prop } from 'ramda'
 
+import { Button, Link, Text } from 'blockchain-info-components'
 import { required, validIban, validBIC } from 'services/FormHelper'
-import { flex, spacing } from 'services/StyleService'
+import { 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 BankInputWrapper = styled(InputWrapper)`
-  & > * {
-    padding-bottom: 12px;
-  }
-`
 const CancelWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 15px;
   a {
     color: #545456;
     font-weight: 300;
@@ -26,37 +26,61 @@ const BorderBox = styled.div`
   border: 1px solid ${props => props.theme['gray-1']};
   padding: 30px;
 `
+const FieldText = styled(Text)`
+  padding-bottom: 10px;
+  padding-top: 20px;
+`
 
 const AddBankDetails = (props) => {
-  const { invalid, submitting } = props
+  const { invalid, submitting, quote } = props
+  const currency = prop('baseCurrency', quote)
+
   return (
     <Form>
       <ColLeft>
         <BorderBox>
-          <BankInputWrapper style={spacing('mb-40')}>
+          <InputWrapper>
             <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>
+            {
+              equals(currency, 'DKK')
+                ? <div>
+                  <FieldText weight={300} size='12px'>
+                    <FormattedMessage id='coinifyexchangedata.addbankdetails.accountno' defaultMessage='Account Number' />
+                  </FieldText>
+                  <Field name='iban' validate={[required]} component={TextBox} />
+                  <FieldText weight={300} size='12px'>
+                    <FormattedMessage id='coinifyexchangedata.addbankdetails.reg' defaultMessage='REG Number' />
+                  </FieldText>
+                  <Field name='bic' validate={[required]} component={TextBox} />
+                </div>
+                : <div>
+                  <FieldText weight={300} size='12px'>
+                    <FormattedMessage id='coinifyexchangedata.addbankdetails.iban' defaultMessage='International Bank Account (IBAN)' />
+                  </FieldText>
+                  <Field name='iban' validate={[required, validIban]} component={TextBox} />
+                  <FieldText weight={300} size='12px'>
+                    <FormattedMessage id='coinifyexchangedata.addbankdetails.bic' defaultMessage='Bank Identifier Code (BIC)' />
+                  </FieldText>
+                  <Field name='bic' validate={[required, validBIC]} component={TextBox} />
+                </div>
+            }
             <Text weight={300} size='12px'>
-              <FormattedMessage id='coinifyexchangedata.addbankdetails.iban' defaultMessage='International Bank Account (IBAN)' />
-              <Field name='iban' validate={[required, validIban]} component={TextBox} />
-            </Text>
-            <Text weight={300} size='12px'>
-              <FormattedMessage id='coinifyexchangedata.addbankdetails.swift' defaultMessage='Bank Identifier Code (SWIFT/BIC)' />
-              <Field name='bic' validate={[required, validBIC]} component={TextBox} />
+              <FormattedMessage id='coinifyexchangedata.addbankdetails.incomplete' defaultMessage='Note: Incomplete or incorrect details will cause processing delays.' />
             </Text>
-          </BankInputWrapper>
+          </InputWrapper>
         </BorderBox>
       </ColLeft>
       <ColRight>
         <ColRightInner>
           <StepTransition next Component={Button} style={spacing('mt-45')} nature='primary' fullwidth disabled={submitting || invalid}>
             <FormattedMessage id='coinifyexchangedata.addbankdetails.continue' defaultMessage='Continue' />
           </StepTransition>
-          <CancelWrapper style={{ ...flex('row justify/center'), ...spacing('mt-15') }}>
+          <CancelWrapper>
             <StepTransition prev Component={Link}>
               <FormattedMessage id='back' defaultMessage='Back' />
             </StepTransition>

diff --git a/...nd/src/scenes/BuySell/CoinifyCheckout/Content/Sell/AddCustomerDetails/template.success.js b/...nd/src/scenes/BuySell/CoinifyCheckout/Content/Sell/AddCustomerDetails/template.success.js
@@ -5,73 +5,72 @@ import styled from 'styled-components'
 import { Button, Link, Text } from 'blockchain-info-components'
 
 import { required } from 'services/FormHelper'
-import { flex, spacing } from 'services/StyleService'
+import { spacing } from 'services/StyleService'
 import { StepTransition } from 'components/Utilities/Stepper'
-import { Form, ColLeft, InputWrapper, PartnerHeader, PartnerSubHeader, ColRight, ColRightInner, Row } from 'components/BuySell/Signup'
+import { Form, CancelWrapper, ColLeft, ColLeftInner, ColRight, ColRightInner, InputWrapper, PartnerHeader, PartnerSubHeader, Row } from 'components/BuySell/Signup'
 import { SelectBoxCountry, TextBox } from 'components/Form'
 
-const DetailsInputWrapper = styled(InputWrapper)`
-  & > * {
-    padding-bottom: 12px;
-  }
-`
-
-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 SpaceRow = styled(Row)`
+  width: 100%;
+  justify-content: space-between;
+`
+const FieldText = styled(Text)`
+  padding-bottom: 10px;
+  padding-top: 20px;
+`
 
 const AddBankDetails = (props) => {
   const { invalid, submitting, onSubmit, medium, account } = props
   return (
     <Form>
       <ColLeft>
         <BorderBox>
-          <DetailsInputWrapper style={spacing('mb-40')}>
+          <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'>
+            <FieldText weight={300} size='12px'>
               <FormattedMessage id='coinifyexchangedata.addcustomerdetails.' defaultMessage='Account Holder’s Full Name' />
-              <Field name='fullname' validate={[required]} component={TextBox} />
-            </Text>
-            <Text weight={300} size='12px'>
+            </FieldText>
+            <Field name='fullname' validate={[required]} component={TextBox} />
+            <FieldText weight={300} size='12px'>
               <FormattedMessage id='coinifyexchangedata.addcustomerdetails.' defaultMessage='Street and Number' />
-              <Field name='street' validate={[required]} component={TextBox} />
-            </Text>
-            <Row>
-              <Text weight={300} size='12px'>
-                <FormattedMessage id='coinifyexchangedata.addcustomerdetails.' defaultMessage='City' />
+            </FieldText>
+            <Field name='street' validate={[required]} component={TextBox} />
+            <SpaceRow>
+              <ColLeftInner>
+                <FieldText weight={300} size='12px'>
+                  <FormattedMessage id='coinifyexchangedata.addcustomerdetails.' defaultMessage='City' />
+                </FieldText>
                 <Field name='city' validate={[required]} component={TextBox} />
-              </Text>
-              <Text weight={300} size='12px'>
-                <FormattedMessage id='coinifyexchangedata.addcustomerdetails.' defaultMessage='Postal Code' />
+              </ColLeftInner>
+              <ColRightInner>
+                <FieldText weight={300} size='12px'>
+                  <FormattedMessage id='coinifyexchangedata.addcustomerdetails.' defaultMessage='Postal Code' />
+                </FieldText>
                 <Field name='postcode' validate={[required]} component={TextBox} />
-              </Text>
-            </Row>
-            <Text weight={300} size='12px'>
+              </ColRightInner>
+            </SpaceRow>
+            <FieldText weight={300} size='12px'>
               <FormattedMessage id='coinifyexchangedata.addcustomerdetails.' defaultMessage='Country' />
-              <Field name='country' validate={[required]} component={SelectBoxCountry} />
-            </Text>
-          </DetailsInputWrapper>
+            </FieldText>
+            <Field name='country' validate={[required]} component={SelectBoxCountry} />
+          </InputWrapper>
         </BorderBox>
       </ColLeft>
       <ColRight>
         <ColRightInner>
           <StepTransition next Component={Button} style={spacing('mt-45')} nature='primary' fullwidth disabled={submitting || invalid} onClick={() => onSubmit(medium, account)}>
             <FormattedMessage id='coinifyexchangedata.addcustomerdetails.continue' defaultMessage='Continue' />
           </StepTransition>
-          <CancelWrapper style={{ ...flex('row justify/center'), ...spacing('mt-15') }}>
+          <CancelWrapper>
             <StepTransition prev Component={Link}>
               <FormattedMessage id='back' defaultMessage='Back' />
             </StepTransition>

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
@@ -8,22 +8,12 @@ import { Button, Icon, Link, Text } from 'blockchain-info-components'
 import { spacing } from 'services/StyleService'
 import { RadioButton } from 'components/Form'
 import { StepTransition } from 'components/Utilities/Stepper'
-import { Form, ColLeft, InputWrapper, PartnerHeader, PartnerSubHeader, ColRight, ColRightInner, Row } from 'components/BuySell/Signup'
+import { Form, CancelWrapper, ColLeft, InputWrapper, PartnerHeader, PartnerSubHeader, ColRight, ColRightInner, Row } from 'components/BuySell/Signup'
 
 const AccountRow = styled(Row)`
   justify-content: space-between;
 `
 
-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;
@@ -66,7 +56,7 @@ const SelectAccounts = (props) => {
             onClick={setBankAccount} fullwidth disabled={submitting || invalid || noRadioButtonSelected}>
             <FormattedMessage id='coinifyexchangedata.selectaccounts.continue' defaultMessage='Continue' />
           </StepTransition>
-          <CancelWrapper style={spacing('mt-15')}>
+          <CancelWrapper>
             <StepTransition prev Component={Link}>
               <FormattedMessage id='back' defaultMessage='Back' />
             </StepTransition>