feat(borrow): add confirm borrow step

blockchain · Feb 27, 2020 · 44bc649 · 44bc649
1 parent a36fc66
commit 44bc649
Show file tree

Hide file tree

Showing 16 changed files with 355 additions and 130 deletions.
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/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/actions.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/borrow/actions.ts
@@ -155,6 +155,7 @@ export const setPaymentSuccess = (payment): BorrowActionTypes => ({
 export const setStep = (
   payload:
     | { offer: OfferType; step: 'CHECKOUT' }
+    | { offer: OfferType; step: 'CONFIRM' }
     | {
         loan: LoanType
         offer: OfferType
@@ -163,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
@@ -118,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/types.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/borrow/types.ts
@@ -26,8 +26,9 @@ export type BorrowMinMaxType = {
   minFiat: number
 }
 
-export enum BORROW_STEPS {
+export enum BorrowSteps {
   'CHECKOUT',
+  'CONFIRM',
   'DETAILS',
   'ADD_COLLATERAL',
   'REPAY_LOAN'
@@ -106,7 +107,7 @@ export interface BorrowState {
   offer?: OfferType
   offers: RemoteDataType<NabuApiErrorType, Array<OfferType>>
   payment: RemoteDataType<string | Error, PaymentType>
-  step: keyof typeof BORROW_STEPS
+  step: keyof typeof BorrowSteps
 }
 
 // Actions
@@ -208,7 +209,7 @@ interface SetStepAction {
   payload:
     | {
         offer?: OfferType
-        step: 'CHECKOUT'
+        step: 'CHECKOUT' | 'CONFIRM'
       }
     | {
         loan: LoanType

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/AddCollateral/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/AddCollateral/template.success.tsx
@@ -106,13 +106,18 @@ type LinkStatePropsType = {
   values?: BorrowFormValuesType
 }
 
+type FormProps = {
+  onSubmit: () => void
+}
+
 export type Props = OwnProps &
   SuccessStateType &
   LinkDispatchPropsType &
   LinkStatePropsType &
+  FormProps &
   State & { onCopyAddress: () => void; onToggleQrCode: () => void }
 
-const Success: React.FC<InjectedFormProps & Props> = props => {
+const Success: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
   return (
     <CustomForm onSubmit={props.handleSubmit}>
       <Top>
@@ -300,9 +305,9 @@ const mapStateToProps = state => ({
   values: selectors.form.getFormValues('borrowForm')(state)
 })
 
-const enhance = compose<any>(
-  reduxForm({ form: 'borrowForm', destroyOnUnmount: false }),
+const enhance = compose(
+  reduxForm<{}, Props>({ form: 'borrowForm', destroyOnUnmount: false }),
   connect(mapStateToProps)
 )
 
-export default enhance(Success)
+export default enhance(Success) as React.FunctionComponent<Props>
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowForm/Summary/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowForm/Summary/index.tsx
@@ -5,10 +5,9 @@ import {
   formatFiat
 } from 'blockchain-wallet-v4/src/exchange/currency'
 import { FormattedMessage } from 'react-intl'
-import { model } from 'data'
 import { OfferType } from 'core/types'
 import { TableRow, Title, Value } from 'components/Borrow'
-import { Text } from 'blockchain-info-components'
+import { Text, TooltipHost, TooltipIcon } from 'blockchain-info-components'
 import React from 'react'
 import styled from 'styled-components'
 
@@ -25,12 +24,8 @@ const Table = styled.div`
   margin-top: 16px;
 `
 
-const { fiatDisplayName } = model.components.borrow
-
 const Summary: React.FC<Props> = props => {
-  const fiatName = fiatDisplayName(props.offer.terms.principalCcy)
   const principalDisplayName = props.displayName
-  const rate = props.rates[fiatName].last
 
   if (!props.values) return null
 
@@ -51,14 +46,6 @@ const Summary: React.FC<Props> = props => {
             {formatFiat(props.principal || 0)} {principalDisplayName}
           </Value>
         </TableRow>
-        <TableRow>
-          <Title>
-            {props.offer.terms.collateralCcy} to {fiatName} Rate
-          </Title>
-          <Value>
-            {formatFiat(rate)} {fiatName}
-          </Value>
-        </TableRow>
         <TableRow>
           <Title>
             <FormattedMessage
@@ -74,6 +61,9 @@ const Summary: React.FC<Props> = props => {
               id='modals.borrow.summary.collateral'
               defaultMessage='Collateral'
             />
+            <TooltipHost id='borrow.collateral.tooltip'>
+              <TooltipIcon name='question-in-circle-filled' />
+            </TooltipHost>
           </Title>
           <Value>
             {coinToString({

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowForm/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowForm/index.tsx
@@ -53,7 +53,10 @@ class BorrowForm extends PureComponent<Props> {
   }
 
   handleSubmit = () => {
-    this.props.borrowActions.createBorrow()
+    this.props.borrowActions.setStep({
+      step: 'CONFIRM',
+      offer: this.props.offer
+    })
   }
 
   render () {

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowForm/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowForm/template.success.tsx
@@ -1,11 +1,10 @@
 import { BorrowFormValuesType } from 'data/components/borrow/types'
 import { Button, HeartbeatLoader, Icon, Text } from 'blockchain-info-components'
-import { CheckBox, Form, FormItem, FormLabel, NumberBox } from 'components/Form'
-import { coinToString } from 'blockchain-wallet-v4/src/exchange/currency'
 import { compose } from 'redux'
 import { connect } from 'react-redux'
 import { Field, InjectedFormProps, reduxForm } from 'redux-form'
 import { FlyoutWrapper } from 'components/Flyout'
+import { Form, FormLabel, NumberBox } from 'components/Form'
 import { FormattedMessage } from 'react-intl'
 import { LinkDispatchPropsType, OwnProps, SuccessStateType } from '.'
 import { maximumAmount, minimumAmount } from './validation'
@@ -15,7 +14,6 @@ import FiatDisplay from 'components/Display/FiatDisplay'
 import React from 'react'
 import styled from 'styled-components'
 import Summary from './Summary'
-import Terms from 'components/Terms'
 
 const CustomForm = styled(Form)`
   height: 100%;
@@ -77,15 +75,6 @@ const FiatContainer = styled.div`
   background-color: ${props => props.theme.grey000};
 `
 
-const TermsFormItem = styled(FormItem)`
-  display: flex;
-  align-items: center;
-  margin-bottom: 16px;
-  .Container {
-    height: auto;
-  }
-`
-
 const ErrorText = styled(Text)`
   display: inline-flex;
   font-weight: 500;
@@ -111,14 +100,17 @@ type LinkStatePropsType = {
   values?: BorrowFormValuesType
 }
 
+type FormProps = {
+  onSubmit: () => void
+}
+
 export type Props = OwnProps &
   SuccessStateType &
   LinkDispatchPropsType &
-  LinkStatePropsType
+  LinkStatePropsType &
+  FormProps
 
-const checkboxShouldBeChecked = value => (value ? undefined : true)
-
-const Success: React.FC<InjectedFormProps & Props> = props => {
+const Success: React.FC<InjectedFormProps<{}, Props> & Props> = props => {
   // TODO: Borrow - make dynamic
   const displayName = props.supportedCoins['PAX'].displayName
 
@@ -212,87 +204,47 @@ const Success: React.FC<InjectedFormProps & Props> = props => {
             collateral={0}
             displayName={displayName}
           />
-          <div>
-            <TermsFormItem>
-              <Field
-                name='blockchain-loan-agreement'
-                validate={[checkboxShouldBeChecked]}
-                component={CheckBox}
-                hideErrors
-                data-e2e='blockchain-loan-agreement'
-              >
-                <Terms company='blockchain-loan-agreement' />
-              </Field>
-            </TermsFormItem>
-            <TermsFormItem>
-              <Field
-                name='blockchain-loan-transfer'
-                validate={[checkboxShouldBeChecked]}
-                component={CheckBox}
-                hideErrors
-                data-e2e='blockchain-loan-transfer'
-              >
-                <Terms
-                  company='blockchain-loan-transfer'
-                  amount={coinToString({
-                    value: props.values
-                      ? props.values.principal
-                        ? (Number(props.values.principal) /
-                            (props.rates[props.offer.terms.principalCcy]
-                              ? props.rates[props.offer.terms.principalCcy].last
-                              : props.rates['USD'].last)) *
-                          props.offer.terms.collateralRatio
-                        : 0
-                      : 0,
-                    unit: { symbol: props.offer.terms.collateralCcy }
-                  })}
-                />
-              </Field>
-            </TermsFormItem>
-          </div>
-          <div>
-            {props.error && (
-              <ErrorText>
-                <Icon
-                  name='alert-filled'
-                  color='red600'
-                  style={{ marginRight: '4px' }}
+          {props.error && (
+            <ErrorText>
+              <Icon
+                name='alert-filled'
+                color='red600'
+                style={{ marginRight: '4px' }}
+              />
+              Error: {props.error}
+            </ErrorText>
+          )}
+          <ButtonContainer>
+            <Button
+              nature='empty'
+              data-e2e='borrowCancel'
+              onClick={props.handleClose}
+            >
+              <Text size='16px' weight={600} color='blue600'>
+                <FormattedMessage
+                  id='modals.borrow.collateralform.cancel'
+                  defaultMessage='Cancel'
                 />
-                Error: {props.error}
-              </ErrorText>
-            )}
-            <ButtonContainer>
-              <Button
-                nature='empty'
-                data-e2e='borrowCancel'
-                onClick={props.handleClose}
-              >
-                <Text size='16px' weight={600} color='blue600'>
+              </Text>
+            </Button>
+            <Button
+              nature='primary'
+              type='submit'
+              data-e2e='borrowSubmit'
+              disabled={props.submitting || props.invalid}
+            >
+              {props.submitting ? (
+                <HeartbeatLoader height='16px' width='16px' color='white' />
+              ) : (
+                <Text size='16px' weight={600} color='white'>
                   <FormattedMessage
-                    id='modals.borrow.collateralform.cancel'
-                    defaultMessage='Cancel'
+                    id='modals.borrow.collateralform.create'
+                    defaultMessage='Create Loan'
                   />
                 </Text>
-              </Button>
-              <Button
-                nature='primary'
-                type='submit'
-                data-e2e='borrowSubmit'
-                disabled={props.submitting || props.invalid}
-              >
-                {props.submitting ? (
-                  <HeartbeatLoader height='16px' width='16px' color='white' />
-                ) : (
-                  <Text size='16px' weight={600} color='white'>
-                    <FormattedMessage
-                      id='modals.borrow.collateralform.create'
-                      defaultMessage='Create Loan'
-                    />
-                  </Text>
-                )}
-              </Button>
-            </ButtonContainer>
-          </div>
+              )}
+            </Button>
+          </ButtonContainer>
         </>
       </Bottom>
     </CustomForm>
@@ -303,9 +255,9 @@ const mapStateToProps = state => ({
   values: selectors.form.getFormValues('borrowForm')(state)
 })
 
-const enhance = compose<any>(
-  reduxForm({ form: 'borrowForm', destroyOnUnmount: false }),
+const enhance = compose(
+  reduxForm<{}, Props>({ form: 'borrowForm', destroyOnUnmount: false }),
   connect(mapStateToProps)
 )
 
-export default enhance(Success)
+export default enhance(Success) as React.FunctionComponent<Props>