feat(simple buy): show transfer details

blockchain · Mar 20, 2020 · d41ff92 · d41ff92
1 parent 742a4b4
commit d41ff92
Show file tree

Hide file tree

Showing 9 changed files with 188 additions and 59 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/reducers.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/reducers.ts
@@ -20,6 +20,7 @@ export function simpleBuyReducer (
     case AT.DESTROY_CHECKOUT:
       return {
         ...state,
+        step: 'CURRENCY_SELECTION',
         account: Remote.NotAsked,
         pairs: Remote.NotAsked,
         suggestedAmounts: Remote.NotAsked

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagaRegister.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagaRegister.ts
@@ -11,6 +11,10 @@ export default ({ api, coreSagas, networks }) => {
       AT.FETCH_SB_FIAT_ELIGIBLE,
       simpleBuySagas.fetchSBFiatEligible
     )
+    yield takeLatest(
+      AT.FETCH_SB_PAYMENT_ACCOUNT,
+      simpleBuySagas.fetchSBPaymentAccount
+    )
     yield takeLatest(AT.FETCH_SB_PAIRS, simpleBuySagas.fetchSBPairs)
     yield takeLatest(
       AT.HANDLE_SB_SUGGESTED_AMOUNT_CLICK,

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagas.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/simpleBuy/sagas.ts
@@ -8,7 +8,7 @@ import {
   convertStandardToBase
 } from '../exchange/services'
 import { errorHandler } from '../helpers'
-import { FiatEligibleType, SBOrderType } from 'core/types'
+import { FiatEligibleType, SBAccountType, SBOrderType } from 'core/types'
 import { getCoinFromPair, getFiatFromPair, NO_PAIR_SELECTED } from './model'
 import { SBCheckoutFormValuesType } from './types'
 import profileSagas from '../../modules/profile/sagas'
@@ -88,8 +88,11 @@ export default ({
       yield put(A.fetchSBPaymentAccountLoading())
       const fiatCurrency = S.getFiatCurrency(yield select())
       if (!fiatCurrency) throw new Error('NO_FIAT_CURRENCY')
-      const { pairs } = yield call(api.getSBPaymentAccount, fiatCurrency)
-      yield put(A.fetchSBPaymentAccountSuccess(pairs))
+      const account: SBAccountType = yield call(
+        api.getSBPaymentAccount,
+        fiatCurrency
+      )
+      yield put(A.fetchSBPaymentAccountSuccess(account))
     } catch (e) {
       const error = errorHandler(e)
       yield put(A.fetchSBPaymentAccountFailure(error))

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/index.tsx
@@ -34,10 +34,6 @@ class Checkout extends PureComponent<Props> {
     this.props.simpleBuyActions.initializeCheckout(this.props.pairs)
   }
 
-  componentWillUnmount () {
-    this.props.simpleBuyActions.destroyCheckout()
-  }
-
   handleSubmit = () => {
     // if the user is < tier 2 go to kyc but save order info
     // if the user is tier 2 try to submit order, let BE fail

diff --git a/...ckchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/template.success.tsx b/...ckchain-wallet-v4-frontend/src/modals/SimpleBuy/EnterAmount/Checkout/template.success.tsx
@@ -1,11 +1,11 @@
 import { BlueCartridge, CustomCartridge } from 'components/Cartridge'
-import { Button, HeartbeatLoader, Icon, Text } from 'blockchain-info-components'
 import { convertBaseToStandard } from 'data/components/exchange/services'
 import { fiatToString } from 'blockchain-wallet-v4/src/exchange/currency'
 import { Field, InjectedFormProps, reduxForm } from 'redux-form'
 import { FlyoutWrapper } from 'components/Flyout'
 import { Form, NumberBox } from 'components/Form'
 import { FormattedMessage } from 'react-intl'
+import { Icon, Text } from 'blockchain-info-components'
 import { maximumAmount, minimumAmount } from './validation'
 import { Props as OwnProps, SuccessStateType } from '.'
 import ActionButton from './ActionButton'

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/OrderDetails/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/OrderDetails/index.tsx
@@ -13,7 +13,7 @@ export type OwnProps = {
   handleClose: () => void
   order: SBOrderType
 }
-type SuccessStateType = {
+export type SuccessStateType = {
   account: SBAccountType
 }
 type LinkDispatchPropsType = {
@@ -28,6 +28,10 @@ type State = {}
 class OrderDetails extends PureComponent<Props, State> {
   state = {}
 
+  componentDidMount () {
+    this.props.simpleBuyActions.fetchSBPaymentAccount()
+  }
+
   render () {
     switch (this.props.order.state) {
       case 'PENDING_CONFIRMATION':

diff --git a/...ges/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/OrderDetails/template.transfer.tsx b/...ges/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/OrderDetails/template.transfer.tsx
@@ -1,17 +1,32 @@
+import { Button, Icon, Text } from 'blockchain-info-components'
+import { convertBaseToStandard } from 'data/components/exchange/services'
+import { fiatToString } from 'blockchain-wallet-v4/src/exchange/currency'
 import { FlyoutWrapper } from 'components/Flyout'
 import { FormattedMessage } from 'react-intl'
-import { Icon, Text } from 'blockchain-info-components'
-import { OwnProps } from '.'
+import { OwnProps, SuccessStateType } from '.'
+import Currencies from 'blockchain-wallet-v4/src/exchange/currencies'
 import React from 'react'
 import styled from 'styled-components'
 
-type Props = OwnProps
+type Props = OwnProps & SuccessStateType
 
+const Wrapper = styled.div`
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  height: 100%;
+`
 const TopText = styled(Text)`
   display: flex;
   align-items: center;
   justify-content: space-between;
 `
+const Bottom = styled(FlyoutWrapper)`
+  display: flex;
+  justify-content: space-between;
+  flex-direction: column;
+  height: 100%;
+`
 const InfoContainer = styled.div`
   margin-top: 16px;
 `
@@ -29,43 +44,134 @@ const Title = styled(Text)`
   color: ${props => props.theme.grey600};
 `
 const Value = styled(Text)`
+  margin-top: 4px;
   font-size: 16px;
   font-weight: 600;
   color: ${props => props.theme.grey800};
 `
 
 const TransferDetails: React.FC<Props> = props => {
   return (
-    <FlyoutWrapper>
-      <TopText color='grey900' size='20px' weight={600}>
-        <FormattedMessage
-          id='modals.simplebuy.transferdetails'
-          defaultMessage='Transfer Details'
-        />
-        <Icon
-          cursor
-          name='close'
-          size='20px'
-          color='grey600'
-          onClick={() => props.handleClose()}
-        />
-      </TopText>
-      <InfoContainer>
-        <Text color='grey600' weight={500} size='14px'>
+    <Wrapper>
+      <div>
+        <FlyoutWrapper>
+          <TopText color='grey900' size='20px' weight={600}>
+            <FormattedMessage
+              id='modals.simplebuy.transferdetails'
+              defaultMessage='Transfer Details'
+            />
+            <Icon
+              cursor
+              name='close'
+              size='20px'
+              color='grey600'
+              onClick={() => props.handleClose()}
+            />
+          </TopText>
+          <InfoContainer>
+            <Text color='grey600' weight={500} size='14px'>
+              <FormattedMessage
+                id='modals.simplebuy.transferdetails.info'
+                defaultMessage='Securely transfer {fiatCurrency} from your bank account to Blockchain.com. Depending on the transfer method and availability of funds, this may take up to 1 business day.'
+                values={{
+                  fiatCurrency: props.order.inputCurrency
+                }}
+              />
+            </Text>
+          </InfoContainer>
+        </FlyoutWrapper>
+        <Row>
+          <Title>
+            <FormattedMessage
+              id='modals.simplebuy.transferdetails.bankname'
+              defaultMessage='Bank Name'
+            />
+          </Title>
+          <Value>{props.account.agent.name}</Value>
+        </Row>
+        <Row>
+          <Title>
+            <FormattedMessage
+              id='modals.simplebuy.transferdetails.bankid'
+              defaultMessage='Bank ID'
+            />
+          </Title>
+          <Value>{props.account.agent.account}</Value>
+        </Row>
+        {props.account.currency === 'USD' && (
+          <Row>
+            <Title>
+              <FormattedMessage
+                id='modals.simplebuy.transferdetails.address'
+                defaultMessage='Address'
+              />
+            </Title>
+            <Value>{props.account.agent.address}</Value>
+          </Row>
+        )}
+        {props.account.currency === 'USD' && (
+          <Row>
+            <Title>
+              <FormattedMessage
+                id='modals.simplebuy.transferdetails.routingnumber'
+                defaultMessage='Routing Number'
+              />
+            </Title>
+            <Value>{props.account.agent.routingNumber}</Value>
+          </Row>
+        )}
+        {(props.account.currency === 'USD' ||
+          props.account.currency === 'GBP') && (
+          <Row>
+            <Title>
+              <FormattedMessage
+                id='modals.simplebuy.transferdetails.recipient'
+                defaultMessage='Recipient'
+              />
+            </Title>
+            <Value>{props.account.agent.recipient}</Value>
+          </Row>
+        )}
+        <Row>
+          <Title>
+            <FormattedMessage
+              id='modals.simplebuy.transferdetails.amount'
+              defaultMessage='Amount to Send'
+            />
+          </Title>
+          <Value>
+            {fiatToString({
+              unit:
+                Currencies[props.order.inputCurrency].units[
+                  props.order.inputCurrency
+                ],
+              value: convertBaseToStandard('FIAT', props.order.inputQuantity)
+            })}
+          </Value>
+        </Row>
+      </div>
+      <Bottom>
+        <Text size='12px' weight={500} color='grey600'>
           <FormattedMessage
-            id='modals.simplebuy.transferdetails.info'
-            defaultMessage='Securely transfer {fiatCurrency} from your bank account to Blockchain.com. Depending on the transfer method and availability of funds, this may take up to 1 business day.'
-            values={{
-              fiatCurrency: props.order.inputCurrency
-            }}
+            id='modals.simplebuy.transferdetails.sendfundsfrom'
+            defaultMessage='Only send funds from a bank account in your name. If not, your deposit could be delayed or rejected.'
           />
         </Text>
-      </InfoContainer>
-      <Row>
-        <Title />
-        <Value />
-      </Row>
-    </FlyoutWrapper>
+        <Button
+          fullwidth
+          nature='primary'
+          data-e2e='closeSBTransferDetails'
+          size='16px'
+          height='48px'
+          onClick={() => props.handleClose()}
+        >
+          <FormattedMessage
+            id='modals.simplebuy.transferdetails.sendfundsfrom'
+            defaultMessage='OK'
+          />
+        </Button>
+      </Bottom>
+    </Wrapper>
   )
 }
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/SimpleBuy/index.tsx
@@ -53,9 +53,7 @@ class SimpleBuy extends PureComponent<Props, State> {
   }
 
   componentWillUnmount () {
-    this.props.simpleBuyActions.setStep({
-      step: 'CURRENCY_SELECTION'
-    })
+    this.props.simpleBuyActions.destroyCheckout()
   }
 
   handleClose = () => {

diff --git a/packages/blockchain-wallet-v4/src/network/api/simpleBuy/types.ts b/packages/blockchain-wallet-v4/src/network/api/simpleBuy/types.ts
@@ -1,25 +1,42 @@
-import {
-  CryptoCurrenciesType,
-  CurrenciesType,
-  FiatCurrenciesType
-} from 'core/types'
+import { CryptoCurrenciesType, FiatCurrenciesType } from 'core/types'
 
-export type SBAccountType = {
+export type ISBAccountType = {
   address: string
-  agent: {
-    account: string
-    address: string
-    code: string
-    country: string
-    name: string
-    recipient: string
-    routingNumber: string
-  }
-  currency: keyof CurrenciesType
   id: string
-  state: 'ACTIVE'
+  state: 'PENDING' | 'ACTIVE'
 }
 
+export type SBAccountType =
+  | ISBAccountType & {
+      agent: {
+        account: string
+        address: string
+        code: string
+        country: string
+        name: string
+        recipient: string
+        routingNumber: string
+      }
+      currency: 'USD'
+    }
+  | ISBAccountType & {
+      agent: {
+        account: string
+        code: string
+        name: string
+      }
+      currency: 'EUR'
+    }
+  | ISBAccountType & {
+      agent: {
+        account: string
+        code: string
+        name: string
+        recipient: string
+      }
+      currency: 'GBP'
+    }
+
 export type SBPairsType =
   | 'BTC-EUR'
   | 'BCH-EUR'