feat(Borrow): add terms

blockchain · Jan 27, 2020 · fc09585 · fc09585
1 parent 85d08a3
commit fc09585
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 24 deletions.
diff --git a/packages/blockchain-info-components/src/Form/CheckBoxInput.js b/packages/blockchain-info-components/src/Form/CheckBoxInput.js
@@ -43,20 +43,22 @@ const Label = styled.label`
     content: '';
     min-width: 12px;
     min-height: 12px;
-    margin-right: 5px;
+    margin-right: 8px;
     background: white;
     border-radius: 2px;
     transition: background 0.2s;
     border: 1px solid ${props => props.theme.blue600};
   }
   &:after {
-    content: '\\e95d';
+    content: '\\e910';
     font-family: 'icomoon', sans-serif;
     position: absolute;
     color: ${props => props.theme.white};
     font-weight: 600;
-    font-size: 10px;
+    font-size: 8px;
     left: 2px;
+    top: 50%;
+    margin-top: -5px;
   }
 `
 

diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Terms/index.js b/packages/blockchain-wallet-v4-frontend/src/components/Terms/index.js
@@ -185,7 +185,7 @@ const Terms = props => {
     case 'blockchain-loan-agreement':
       return (
         <TermsContainer>
-          <Text size='14px' weight={500} color='grey600'>
+          <Text size='13px' weight={500} color='grey600'>
             <FormattedMessage
               id='scenes.borrow.terms.read'
               defaultMessage='I have read and agreed to the'
@@ -195,7 +195,7 @@ const Terms = props => {
           <Link
             href='https://www.blockchain.com/legal/terms'
             target='_blank'
-            size='14px'
+            size='13px'
             weight={500}
             data-e2e='blockchainTermsLink'
           >
@@ -209,7 +209,7 @@ const Terms = props => {
     case 'blockchain-loan-transfer':
       return (
         <TermsContainer>
-          <Text size='14px' weight={500} color='grey600'>
+          <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.'
@@ -221,7 +221,7 @@ const Terms = props => {
     default:
       return (
         <TermsContainer>
-          <Text size='12px' weight={400}>
+          <Text size='12px' weight={500}>
             <FormattedMessage
               id='scenes.register.registerform.blockchain.read'
               defaultMessage='I have read and agreed to the'
@@ -241,7 +241,7 @@ const Terms = props => {
             />
           </Link>
           &nbsp;
-          <Text size='12px' weight={400}>
+          <Text size='12px' weight={500}>
             &
           </Text>
           &nbsp;

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,13 +1,7 @@
 import { BorrowFormValuesType } from 'data/components/borrow/types'
 import { Button, HeartbeatLoader, Text } from 'blockchain-info-components'
-import {
-  CheckBox,
-  Form,
-  FormItem,
-  FormLabel,
-  NumberBox,
-  SelectBoxBtcAddresses
-} from 'components/Form'
+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'
@@ -82,6 +76,10 @@ const InlineText = styled(Text)`
 const TermsFormItem = styled(FormItem)`
   display: flex;
   align-items: center;
+  margin-bottom: 16px;
+  .Container {
+    height: auto;
+  }
 `
 
 type LinkStatePropsType = {
@@ -104,7 +102,6 @@ const Success: React.FC<InjectedFormProps & Props> = props => {
   return (
     <CustomForm onSubmit={props.handleSubmit}>
       <Top>
-        {/* TODO: Borrow - make dynamic */}
         <Text color='grey900' size='24px' weight={600}>
           <FormattedMessage
             id='modals.borrow.borrowusd'
@@ -161,7 +158,6 @@ const Success: React.FC<InjectedFormProps & Props> = props => {
             />
           </Text>
         </CustomFormLabel>
-        {/* TODO: Borrow - handle other coins */}
         <BorrowCoinDropdown {...props} />
       </Top>
       <Bottom>
@@ -174,26 +170,42 @@ const Success: React.FC<InjectedFormProps & Props> = props => {
               displayName={displayName}
               offer={offer}
             />
-            {/* <div>
+            <div>
               <TermsFormItem>
                 <Field
                   name='blockchain-loan-agreement'
                   validate={[checkboxShouldBeChecked]}
                   component={CheckBox}
+                  hideErrors
                   data-e2e='blockchain-loan-agreement'
-                />
-                <Terms company='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={props.values} />
+                >
+                  <Terms
+                    company='blockchain-loan-transfer'
+                    amount={coinToString({
+                      value: props.values.principal
+                        ? (Number(props.values.principal) /
+                            (props.rates[offer.terms.principalCcy]
+                              ? props.rates[offer.terms.principalCcy].last
+                              : props.rates['USD'].last)) *
+                          offer.terms.collateralRatio
+                        : 0,
+                      unit: { symbol: offer.terms.collateralCcy }
+                    })}
+                  />
+                </Field>
               </TermsFormItem>
-            </div> */}
+            </div>
             <div>
               <Button
                 nature='primary'