Merge branch 'development' of https://github.com/blockchain/blockchai…

…n-wallet-v4-frontend into style/kyc-form
blockchain · Feb 28, 2020 · 40df130 · 40df130
2 parents 985111d + 359017e
commit 40df130
Show file tree

Hide file tree

Showing 37 changed files with 858 additions and 298 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "blockchain-wallet-v4",
-  "version": "4.28.6",
+  "version": "4.28.11",
   "license": "AGPL-3.0-or-later",
   "private": true,
   "author": {

diff --git a/packages/blockchain-wallet-v4-frontend/src/assets/locales/en.json b/packages/blockchain-wallet-v4-frontend/src/assets/locales/en.json
@@ -4,6 +4,7 @@
   "bitpaycta.learnmore": "Learn more",
   "bitpaycta.nowsupporting": "Your {coin} wallet now supports",
   "borrow.amount.tooltip.description": "This amount does not include the required collateral network fee.",
+  "borrow.collateral.tooltip.description": "The amount you need to deposit to open this loan.",
   "buy.accountendingwith": "ending with",
   "buy.output_method.title.buy": "I want to buy",
   "buy.output_method.title.sell": "I want to sell",
@@ -265,7 +266,6 @@
   "components.dataerror.body": "Please",
   "components.dataerror.click": "click here",
   "components.dataerror.feesfetchfailure": "There was a problem fetching fees. Please try again later.",
-  "components.dataerror.header": "Oops, something went wrong here!",
   "components.dataerror.refresh": "to refresh.",
   "components.editdescription.add": "Add a description",
   "components.emailrequired.addemail": "Add email",
@@ -1265,6 +1265,9 @@
   "scenes.authorizelogin.verifying": "We're verifying your authorization attempt. Please wait...",
   "scenes.authorizelogin.vs": "vs.",
   "scenes.authorizelogin.yourdevice": "Your Device",
+  "scenes.borrow.terms.default.user": "User Agreement",
+  "scenes.borrow.terms.read": "I have read and agreed to the",
+  "scenes.borrow.transferterms.read": "By accepting this, you agree to transfer <b>{amount}</b> from your wallet to Blockchain.com. The BTC amount will be returned after the loan is repaid in full.",
   "scenes.buy_sell.coinify.kyc.header.completed": "Completed",
   "scenes.buy_sell.coinify.kyc.header.expired": "Expired",
   "scenes.buy_sell.coinify.kyc.header.failed": "Failed",

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Borrow/index.tsx b/packages/blockchain-wallet-v4-frontend/src/components/Borrow/index.tsx
@@ -13,6 +13,8 @@ export const TableRow = styled.div`
 `
 
 export const Title = styled(Text)`
+  display: flex;
+  align-items: center;
   font-size: 14px;
   font-weight: 500;
   color: ${props => props.theme.grey600};

diff --git a/...rontend/src/components/DataError/index.js → ...ontend/src/components/DataError/index.tsx b/...rontend/src/components/DataError/index.js → ...ontend/src/components/DataError/index.tsx
@@ -23,7 +23,10 @@ const Header = styled(Text)`
   margin-bottom: 20px;
 `
 
-const DataErrorContainer = props => {
+const DataError = (props: {
+  message?: { message: string | Error }
+  onClick?: () => void
+}) => {
   return (
     <Wrapper>
       <Empty>
@@ -40,4 +43,4 @@ const DataErrorContainer = props => {
   )
 }
 
-export default DataErrorContainer
+export default DataError
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Terms/index.js b/packages/blockchain-wallet-v4-frontend/src/components/Terms/index.js
@@ -1,4 +1,4 @@
-import { FormattedMessage } from 'react-intl'
+import { FormattedHTMLMessage, FormattedMessage } from 'react-intl'
 import React from 'react'
 import styled from 'styled-components'
 
@@ -182,6 +182,42 @@ const Terms = props => {
           </Link>
         </TermsContainer>
       )
+    case 'blockchain-loan-agreement':
+      return (
+        <TermsContainer>
+          <Text size='13px' weight={500} color='grey600'>
+            <FormattedMessage
+              id='scenes.borrow.terms.read'
+              defaultMessage='I have read and agreed to the'
+            />
+          </Text>
+          <span>&nbsp;</span>
+          <Link
+            href='https://www.blockchain.com/legal/terms'
+            target='_blank'
+            size='13px'
+            weight={500}
+            data-e2e='blockchainTermsLink'
+          >
+            <FormattedMessage
+              id='scenes.borrow.terms.default.user'
+              defaultMessage='User Agreement'
+            />
+          </Link>
+        </TermsContainer>
+      )
+    case 'blockchain-loan-transfer':
+      return (
+        <TermsContainer>
+          <Text size='13px' weight={500} color='grey600'>
+            <FormattedHTMLMessage
+              id='scenes.borrow.transferterms.read'
+              defaultMessage='By accepting this, you agree to transfer <b>{amount}</b> from your wallet to Blockchain.com. The BTC amount will be returned after the loan is repaid in full.'
+              values={{ amount: props.amount }}
+            />
+          </Text>
+        </TermsContainer>
+      )
     default:
       return (
         <TermsContainer style={{ paddingLeft: '4px', margin: '8px 0' }}>

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Tooltips/index.js b/packages/blockchain-wallet-v4-frontend/src/components/Tooltips/index.js
@@ -339,6 +339,12 @@ class Tooltips extends React.PureComponent {
             defaultMessage='This amount does not include the required collateral network fee.'
           />
         </Tooltip>
+        <Tooltip id='borrow.collateral.tooltip'>
+          <FormattedMessage
+            id='borrow.collateral.tooltip.description'
+            defaultMessage='The amount you need to deposit to open this loan.'
+          />
+        </Tooltip>
         <Tooltip id='coming-soon'>
           <FormattedMessage
             id='tooltip.comingsoon'

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/borrow/actionTypes.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/borrow/actionTypes.ts
@@ -12,6 +12,14 @@ export const FETCH_BORROW_OFFERS_FAILURE = '@EVENT.FETCH_BORROW_OFFERS_FAILURE'
 export const FETCH_BORROW_OFFERS_LOADING = '@EVENT.FETCH_BORROW_OFFERS_LOADING'
 export const FETCH_BORROW_OFFERS_SUCCESS = '@EVENT.FETCH_BORROW_OFFERS_SUCCESS'
 
+export const FETCH_LOAN_FINANCIALS = '@EVENT.FETCH_LOAN_FINANCIALS'
+export const FETCH_LOAN_FINANCIALS_FAILURE =
+  '@EVENT.FETCH_LOAN_FINANCIALS_FAILURE'
+export const FETCH_LOAN_FINANCIALS_LOADING =
+  '@EVENT.FETCH_LOAN_FINANCIALS_LOADING'
+export const FETCH_LOAN_FINANCIALS_SUCCESS =
+  '@EVENT.FETCH_LOAN_FINANCIALS_SUCCESS'
+
 export const FETCH_USER_BORROW_HISTORY = '@EVENT.FETCH_USER_BORROW_HISTORY'
 export const FETCH_USER_BORROW_HISTORY_FAILURE =
   '@EVENT.FETCH_USER_BORROW_HISTORY_FAILURE'

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/borrow/actions.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/borrow/actions.ts
@@ -1,6 +1,11 @@
 import * as AT from './actionTypes'
 import { BorrowActionTypes, BorrowMinMaxType } from './types'
-import { CoinType, LoanType, OfferType } from 'blockchain-wallet-v4/src/types'
+import {
+  CoinType,
+  LoanFinancialsType,
+  LoanType,
+  OfferType
+} from 'blockchain-wallet-v4/src/types'
 
 export const addCollateral = () => ({
   type: AT.ADD_COLLATERAL
@@ -36,6 +41,33 @@ export const fetchBorrowOffersSuccess = (offers): BorrowActionTypes => ({
   }
 })
 
+export const fetchLoanFinancials = (loan: LoanType) => ({
+  type: AT.FETCH_LOAN_FINANCIALS,
+  payload: {
+    loan
+  }
+})
+
+export const fetchLoanFinancialsLoading = (): BorrowActionTypes => ({
+  type: AT.FETCH_LOAN_FINANCIALS_LOADING
+})
+
+export const fetchLoanFinancialsFailure = (error): BorrowActionTypes => ({
+  type: AT.FETCH_LOAN_FINANCIALS_FAILURE,
+  payload: {
+    error
+  }
+})
+
+export const fetchLoanFinancialsSuccess = (
+  financials: LoanFinancialsType
+): BorrowActionTypes => ({
+  type: AT.FETCH_LOAN_FINANCIALS_SUCCESS,
+  payload: {
+    financials
+  }
+})
+
 export const fetchUserBorrowHistory = () => ({
   type: AT.FETCH_USER_BORROW_HISTORY
 })
@@ -123,6 +155,7 @@ export const setPaymentSuccess = (payment): BorrowActionTypes => ({
 export const setStep = (
   payload:
     | { offer: OfferType; step: 'CHECKOUT' }
+    | { offer: OfferType; step: 'CONFIRM' }
     | {
         loan: LoanType
         offer: OfferType
@@ -131,7 +164,7 @@ export const setStep = (
 ): BorrowActionTypes => ({
   type: AT.SET_STEP,
   payload:
-    payload.step === 'CHECKOUT'
+    payload.step === 'CHECKOUT' || payload.step === 'CONFIRM'
       ? {
           step: payload.step,
           offer: payload.offer

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/borrow/reducers.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/borrow/reducers.ts
@@ -38,6 +38,42 @@ export function borrowReducer (
         ...state,
         offers: Remote.Success(action.payload.offers)
       }
+    case AT.FETCH_LOAN_FINANCIALS_LOADING:
+      return state.loan
+        ? {
+            ...state,
+            loan: {
+              ...state.loan,
+              financials: Remote.Loading
+            }
+          }
+        : {
+            ...state
+          }
+    case AT.FETCH_LOAN_FINANCIALS_FAILURE:
+      return state.loan
+        ? {
+            ...state,
+            loan: {
+              ...state.loan,
+              financials: Remote.Failure(action.payload.error)
+            }
+          }
+        : {
+            ...state
+          }
+    case AT.FETCH_LOAN_FINANCIALS_SUCCESS:
+      return state.loan
+        ? {
+            ...state,
+            loan: {
+              ...state.loan,
+              financials: Remote.Success(action.payload.financials)
+            }
+          }
+        : {
+            ...state
+          }
     case AT.FETCH_USER_BORROW_HISTORY_LOADING:
       return {
         ...state,
@@ -82,7 +118,8 @@ export function borrowReducer (
       }
     case AT.SET_STEP:
       switch (action.payload.step) {
-        case 'CHECKOUT': {
+        case 'CHECKOUT':
+        case 'CONFIRM': {
           return {
             ...state,
             step: action.payload.step,

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/borrow/sagaRegister.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/borrow/sagaRegister.ts
@@ -15,6 +15,7 @@ export default ({ api, coreSagas, networks }) => {
     yield takeLatest(AT.CREATE_BORROW, borrowSagas.createBorrow)
     yield takeLatest(AT.DESTROY_BORROW, borrowSagas.destroyBorrow)
     yield takeLatest(AT.FETCH_BORROW_OFFERS, borrowSagas.fetchBorrowOffers)
+    yield takeLatest(AT.FETCH_LOAN_FINANCIALS, borrowSagas.fetchLoanFinancials)
     yield takeLatest(
       AT.FETCH_USER_BORROW_HISTORY,
       borrowSagas.fetchUserBorrowHistory