feat(Borrow): min amount check

blockchain · Jan 24, 2020 · 0e495e0 · 0e495e0
1 parent 5606a2a
commit 0e495e0
Show file tree

Hide file tree

Showing 5 changed files with 97 additions and 17 deletions.
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='14px' 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='14px'
+            weight={500}
+            data-e2e='blockchainTermsLink'
+          >
+            <FormattedMessage
+              id='scenes.borrow.terms.default.loan'
+              defaultMessage='Loan Agreement'
+            />
+          </Link>
+        </TermsContainer>
+      )
+    case 'blockchain-loan-transfer':
+      return (
+        <TermsContainer>
+          <Text size='14px' 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>

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/exchange/types.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/exchange/types.ts
@@ -1,7 +1,6 @@
 import * as AT from './actionTypes'
 import * as Currencies from 'blockchain-wallet-v4/src/exchange/currencies'
-import { RemoteData } from 'blockchain-wallet-v4/src/remote/types'
-import { String } from 'index'
+import { RemoteDataType } from 'data/types'
 
 // Types
 
@@ -56,7 +55,7 @@ export type SourceFeeType =
 
 // State
 export interface ExchangeState {
-  limits: RemoteData<string, Currencies<LimitsType>>
+  limits: RemoteDataType<string, Currencies<LimitsType>>
   max: null | LimitAmountType
   min: null | LimitAmountType
   showError: boolean

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,22 +1,25 @@
 import { BorrowFormValuesType } from 'data/components/borrow/types'
 import { Button, HeartbeatLoader, Text } from 'blockchain-info-components'
-import { compose } from 'redux'
-import { connect } from 'react-redux'
-import { Field, InjectedFormProps, reduxForm } from 'redux-form'
 import {
+  CheckBox,
   Form,
+  FormItem,
   FormLabel,
   NumberBox,
   SelectBoxBtcAddresses
 } from 'components/Form'
+import { compose } from 'redux'
+import { connect } from 'react-redux'
+import { Field, InjectedFormProps, reduxForm } from 'redux-form'
 import { FormattedMessage } from 'react-intl'
 import { LinkDispatchPropsType, SuccessStateType } from '.'
-import { maximumAmount } from './validation'
+import { maximumAmount, minimumAmount } from './validation'
 import { selectors } from 'data'
 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%;
@@ -74,12 +77,19 @@ const InlineText = styled(Text)`
   }
 `
 
+const TermsFormItem = styled(FormItem)`
+  display: flex;
+  align-items: center;
+`
+
 type LinkStatePropsType = {
   values: BorrowFormValuesType
 }
 
 type Props = SuccessStateType & LinkDispatchPropsType & LinkStatePropsType
 
+const checkboxShouldBeChecked = value => (value ? undefined : true)
+
 const Success: React.FC<InjectedFormProps & Props> = props => {
   const offer = props.offers.find(
     offer =>
@@ -115,7 +125,7 @@ const Success: React.FC<InjectedFormProps & Props> = props => {
             component={NumberBox}
             data-e2e='principalInput'
             name='principal'
-            validate={[maximumAmount]}
+            validate={[maximumAmount, minimumAmount]}
           />
           <PrincipalCcyAbsolute>
             <Text color='grey400' size='14px' weight={600}>
@@ -163,15 +173,36 @@ const Success: React.FC<InjectedFormProps & Props> = props => {
           <>
             <Summary
               {...props}
+              {...props.values}
               collateral={0}
               displayName={displayName}
               offer={offer}
             />
+            {/* <div>
+              <TermsFormItem>
+                <Field
+                  name='blockchain-loan-agreement'
+                  validate={[checkboxShouldBeChecked]}
+                  component={CheckBox}
+                  data-e2e='blockchain-loan-agreement'
+                />
+                <Terms company='blockchain-loan-agreement' />
+              </TermsFormItem>
+              <TermsFormItem>
+                <Field
+                  name='blockchain-loan-transfer'
+                  validate={[checkboxShouldBeChecked]}
+                  component={CheckBox}
+                  data-e2e='blockchain-loan-transfer'
+                />
+                <Terms company='blockchain-loan-transfer' amount={props.values} />
+              </TermsFormItem>
+            </div> */}
             <div>
               <Button
                 nature='primary'
                 type='submit'
-                disabled={props.submitting}
+                disabled={props.submitting || props.invalid}
               >
                 {props.submitting ? (
                   <HeartbeatLoader height='16px' width='16px' color='white' />

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowForm/validation.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowForm/validation.tsx
@@ -3,8 +3,21 @@ import BigNumber from 'bignumber.js'
 // import { FormattedMessage } from 'react-intl'
 // import React from 'react'
 
-export const maximumAmount = (value: string, allValues: BorrowFormValuesType) => {
+export const maximumAmount = (
+  value: string,
+  allValues: BorrowFormValuesType
+) => {
   if (allValues.maxCollateralCounter !== undefined) {
-    return new BigNumber(allValues.maxCollateralCounter).isLessThan(value)
+    return new BigNumber(allValues.maxCollateralCounter).isLessThan(
+      Number(value)
+    )
   }
-}
+}
+
+export const minimumAmount = (
+  value: string,
+  allValues: BorrowFormValuesType
+) => {
+  if (!value) return true
+  return new BigNumber(0).isGreaterThanOrEqualTo(value)
+}
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/Summary/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/Summary/index.tsx
@@ -44,14 +44,11 @@ const Value = styled(Text)`
   color: ${props => props.theme.grey800};
 `
 
-const ColValue = styled(Value)`
-  margin-top: 6px;
-`
-
 const BottomRow = styled.div`
   display: flex;
   margin-top: 20px;
 `
+
 const Column = styled.div`
   width: 33.333%;
   border-left: 1px solid ${props => props.theme.grey000};
@@ -64,6 +61,10 @@ const Column = styled.div`
   }
 `
 
+const ColValue = styled(Value)`
+  margin-top: 6px;
+`
+
 const Summary: React.FC<Props> = props => {
   const rate = props.rates[props.offer.terms.principalCcy]
     ? props.rates[props.offer.terms.principalCcy].last