feat(Borrow): summary cleanup

packages/blockchain-wallet-v4-frontend/src/components/Form/NumberBox/index.js

@@ -31,6 +31,7 @@ const NumberBox = field => {
       <NumberInput
         {...field.input}
         errorState={errorState}
+        autoFocus={field.autoFocus}
         placeholder={field.placeholder}
         data-e2e={field['data-e2e']}
       />

packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowForm/index.tsx

@@ -1,8 +1,14 @@
 import { actions } from 'data'
 import { bindActionCreators, compose, Dispatch } from 'redux'
+import {
+  CoinType,
+  OfferType,
+  PaymentType,
+  RatesType,
+  RemoteDataType
+} from 'data/types'
 import { connect } from 'react-redux'
 import { getData } from './selectors'
-import { OfferType, PaymentType, RatesType, RemoteDataType } from 'data/types'
 import DataError from 'components/DataError'
 import Loading from './template.loading'
 import React, { Component } from 'react'
@@ -13,6 +19,7 @@ export type LinkDispatchPropsType = {
 }
 
 export type SuccessStateType = {
+  coin: CoinType
   offers: Array<OfferType>
   payment: PaymentType
   rates: RatesType

packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowForm/selectors.ts

@@ -2,11 +2,12 @@ import { lift } from 'ramda'
 import { selectors } from 'data'
 
 export const getData = state => {
+  const coin = selectors.components.borrow.getCoinType(state)
   const offersR = selectors.components.borrow.getOffers(state)
   const paymentR = selectors.components.borrow.getPayment(state)
   const ratesR = selectors.components.borrow.getRates(state)
 
-  return lift((offers, payment, rates) => ({ offers, payment, rates }))(
+  return lift((offers, payment, rates) => ({ coin, offers, payment, rates }))(
     offersR,
     paymentR,
     ratesR

packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowForm/template.success.tsx

@@ -1,8 +1,4 @@
-import {
-  BorrowFormValuesType,
-  OfferType,
-  PaymentType
-} from 'data/components/borrow/types'
+import { BorrowFormValuesType } from 'data/components/borrow/types'
 import { Button, HeartbeatLoader, Text } from 'blockchain-info-components'
 import { compose } from 'redux'
 import { connect } from 'react-redux'
@@ -17,7 +13,6 @@ import { FormattedMessage } from 'react-intl'
 import { LinkDispatchPropsType, SuccessStateType } from '.'
 import { maximumAmount } from './validation'
 import { selectors } from 'data'
-import { values } from 'ramda'
 import FiatDisplay from 'components/Display/FiatDisplay'
 import React from 'react'
 import styled from 'styled-components'
@@ -50,10 +45,20 @@ const CustomFormLabel = styled(FormLabel)`
 
 const CustomField = styled(Field)`
   width: 50%;
+  > input {
+    padding-left: 50px;
+  }
 `
 
 const AmountFieldContainer = styled.div`
   display: flex;
+  position: relative;
+`
+
+const PrincipalCcyAbsolute = styled.div`
+  position: absolute;
+  top: 16px;
+  left: 12px;
 `
 
 const MaxAmountContainer = styled.div`
@@ -76,6 +81,12 @@ type LinkStatePropsType = {
 type Props = SuccessStateType & LinkDispatchPropsType & LinkStatePropsType
 
 const Success: React.FC<InjectedFormProps & Props> = props => {
+  const offer = props.offers.find(
+    offer =>
+      offer.terms.collateralCcy === props.coin &&
+      offer.terms.principalCcy === 'PAX'
+  )
+
   return (
     <CustomForm onSubmit={props.handleSubmit}>
       <Top>
@@ -96,11 +107,18 @@ const Success: React.FC<InjectedFormProps & Props> = props => {
         </CustomFormLabel>
         <AmountFieldContainer>
           <CustomField
+            // @ts-ignore
+            autoFocus
             component={NumberBox}
             data-e2e='principalInput'
             name='principal'
             validate={[maximumAmount]}
           />
+          <PrincipalCcyAbsolute>
+            <Text color='grey400' size='14px' weight={600}>
+              USD
+            </Text>
+          </PrincipalCcyAbsolute>
           <MaxAmountContainer>
             <InlineText color='grey600' weight={500} size='12px'>
               <FormattedMessage
@@ -138,26 +156,38 @@ const Success: React.FC<InjectedFormProps & Props> = props => {
         />
       </Top>
       <Bottom>
-        <Summary
-          rates={props.rates}
-          collateral={0}
-          principal={props.values.principal}
-          offer={props.offers[0]}
-        />
-        <div>
-          <Button nature='primary' type='submit' disabled={props.submitting}>
-            {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>
-        </div>
+        {offer ? (
+          <>
+            <Summary
+              rates={props.rates}
+              collateral={0}
+              principal={props.values.principal}
+              offer={offer}
+            />
+            <div>
+              <Button
+                nature='primary'
+                type='submit'
+                disabled={props.submitting}
+              >
+                {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>
+            </div>
+          </>
+        ) : (
+          <Text color='grey700' weight={600} size='16px'>
+            There is no loan offer for {props.coin} to USD PAX
+          </Text>
+        )}
       </Bottom>
     </CustomForm>
   )

packages/blockchain-wallet-v4-frontend/src/modals/Borrow/Summary/index.tsx

@@ -1,6 +1,7 @@
 import {
   coinToString,
-  fiatToString
+  fiatToString,
+  formatFiat
 } from 'blockchain-wallet-v4/src/exchange/currency'
 import { FormattedMessage } from 'react-intl'
 import { OfferType, RatesType } from 'data/types'
@@ -24,24 +25,44 @@ const Row = styled.div`
   justify-content: space-between;
   align-items: center;
   padding: 12px 0;
-  border-top: 1px solid ${props => props.theme.grey000};
-  &:last-child {
-    border-bottom: 1px solid ${props => props.theme.grey000};
+  border-bottom: 1px solid ${props => props.theme.grey000};
+  &:first-child {
+    border-top: 1px solid ${props => props.theme.grey000};
   }
 `
 
 const Title = styled(Text)`
   font-size: 14px;
-  font-weight: 600;
+  font-weight: 500;
   color: ${props => props.theme.grey600};
 `
 
 const Value = styled(Text)`
   font-size: 14px;
-  font-weight: 600;
+  font-weight: 500;
   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};
+  &:first-child {
+    border-left: 0;
+  }
+  &:nth-child(2) {
+    padding-left: 24px;
+    padding-right: 24px;
+  }
+`
+
 const Summary: React.FC<Props> = props => {
   const rate = props.rates[props.offer.terms.principalCcy]
     ? props.rates[props.offer.terms.principalCcy].last
@@ -61,7 +82,7 @@ const Summary: React.FC<Props> = props => {
             />
           </Title>
           <Value>
-            {props.principal || 0} {props.offer.terms.principalCcy}
+            {formatFiat(props.principal || 0)} {props.offer.terms.principalCcy}
           </Value>
         </Row>
         <Row>
@@ -83,8 +104,10 @@ const Summary: React.FC<Props> = props => {
           <Value>
             {props.offer.terms.interestRate * 100}% /{' '}
             {props.principal
-              ? props.offer.terms.interestRate * Number(props.principal)
-              : 0}{' '}
+              ? formatFiat(
+                  props.offer.terms.interestRate * Number(props.principal)
+                )
+              : formatFiat(0)}{' '}
             {props.offer.terms.principalCcy}
           </Value>
         </Row>
@@ -113,6 +136,28 @@ const Summary: React.FC<Props> = props => {
             )
           </Value>
         </Row>
+        <BottomRow>
+          <Column>
+            <Title>
+              <FormattedMessage
+                id='modals.borrow.summary.collateralization'
+                defaultMessage='Collateralization'
+              />
+            </Title>
+            <ColValue>
+              {(props.offer.terms.collateralRatio * 100).toFixed(0)}%
+            </ColValue>
+          </Column>
+          <Column>
+            <Title>
+              <FormattedMessage
+                id='modals.borrow.summary.loanterm'
+                defaultMessage='Loan Term'
+              />
+            </Title>
+            <ColValue>{props.offer.terms.format}</ColValue>
+          </Column>
+        </BottomRow>
       </Table>
     </div>
   )

packages/blockchain-wallet-v4-frontend/src/modals/Borrow/index.tsx

@@ -4,10 +4,10 @@ import modalEnhancer from 'providers/ModalEnhancer'
 import React, { PureComponent } from 'react'
 
 interface Props {
-  close: () => void,
-  position: number,
-  userClickedOutside: boolean,
+  close: () => void
+  position: number
   total: number
+  userClickedOutside: boolean
 }
 
 class Borrow extends PureComponent<Props> {
@@ -28,7 +28,14 @@ class Borrow extends PureComponent<Props> {
     const { position, total } = this.props
 
     return (
-      <Flyout position={position} in={this.state.show} userClickedOutside={this.props.userClickedOutside} onClose={this.handleClose} data-e2e='borrowModal' total={total}>
+      <Flyout
+        position={position}
+        in={this.state.show}
+        userClickedOutside={this.props.userClickedOutside}
+        onClose={this.handleClose}
+        data-e2e='borrowModal'
+        total={total}
+      >
         <BorrowForm />
       </Flyout>
     )

packages/blockchain-wallet-v4-frontend/src/scenes/Borrow/BorrowPax/index.tsx

@@ -2,33 +2,60 @@ import { Box } from 'components/Box'
 import { Button, Icon, Text } from 'blockchain-info-components'
 import { FormattedMessage } from 'react-intl'
 import React, { PureComponent } from 'react'
+import styled from 'styled-components'
 
-interface Props {
+interface Props {}
+interface State {}
 
-}
-interface State {
-
-}
+const CustomBox = styled(Box)`
+  background-image: url('/img/buy-sell-learn-more.png');
+  /* stylelint-disable */
+  background-image: -webkit-image-set(
+    url('/img/buy-sell-learn-more.png') 1x,
+    url('/img/buy-sell-learn-more@2x.png') 2x
+  );
+  /* stylelint-enable */
+  background-repeat: no-repeat;
+`
 
 class BorrowPax extends PureComponent<Props, State> {
   state = {}
 
   render () {
     return (
-      <Box>
+      <CustomBox>
         <Icon name='pie' color='blue600' size='32px' />
-        <Text size='20px' color='grey800' weight={600} style={{ marginTop: '16px' }}>
-          <FormattedMessage id='scenes.borrow.borrowusd' defaultMessage='Borrow USD Pax Today' />
+        <Text
+          size='20px'
+          color='grey800'
+          weight={600}
+          style={{ marginTop: '16px' }}
+        >
+          <FormattedMessage
+            id='scenes.borrow.borrowusd'
+            defaultMessage='Borrow USD Pax Today'
+          />
         </Text>
-        <Text size='14px' color='grey600' weight={500} style={{ marginTop: '4px', lineHeight: 1.5 }}>
-          <FormattedMessage id='scenes.borrow.getusdpax' defaultMessage='Get USD Pax directly from your Blockchain Wallet, use your bitcoin as collateral. You need to be Gold level to benefit from this new offering.' />
+        <Text
+          size='14px'
+          color='grey600'
+          weight={500}
+          style={{ marginTop: '4px', lineHeight: 1.5 }}
+        >
+          <FormattedMessage
+            id='scenes.borrow.getusdpax'
+            defaultMessage='Get USD Pax directly from your Blockchain Wallet, use your bitcoin as collateral. You need to be Gold level to benefit from this new offering.'
+          />
         </Text>
         <Button style={{ marginTop: '16px' }} nature='light' fullwidth>
-          <FormattedMessage id='scenes.borrow.learnmore' defaultMessage='Learn More' />
+          <FormattedMessage
+            id='scenes.borrow.learnmore'
+            defaultMessage='Learn More'
+          />
         </Button>
-      </Box>
+      </CustomBox>
     )
   }
 }
 
-export default BorrowPax
+export default BorrowPax