feat(borrow): move react transition to flyout

blockchain · Feb 14, 2020 · 4a2926c · 4a2926c
1 parent c467edd
commit 4a2926c
Show file tree

Hide file tree

Showing 12 changed files with 195 additions and 73 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/components/Flyout/index.tsx b/packages/blockchain-wallet-v4-frontend/src/components/Flyout/index.tsx
@@ -2,26 +2,29 @@ import { E2EType } from './types'
 import { Modal } from 'blockchain-info-components'
 import media from 'services/ResponsiveService'
 import React from 'react'
+import ReactCSSTransitionGroup from 'react-addons-css-transition-group'
 import styled from 'styled-components'
 import Transition from 'react-transition-group/Transition'
+// TODO: use only ReactCSSTransitionGroup
 
 export const duration = 500
+export const width = 480
 
 const defaultStyle = {
   transition: `right ${duration}ms`,
-  right: '-480px'
+  right: `-${width}px`
 }
 
 const transitionStyles = {
-  entering: { right: '-480px' },
+  entering: { right: `-${width}px` },
   entered: { right: '0px' }
 }
 
 const FlyoutModal = styled(Modal)`
   border-radius: 0px;
   overflow: auto;
   position: absolute;
-  width: 480px;
+  width: ${width}px;
   height: 100vh;
   color: ${props => props.theme['gray-5']};
   ${media.mobile`
@@ -31,7 +34,55 @@ const FlyoutModal = styled(Modal)`
   `};
 `
 
+const FlyoutChildren = styled.div<{ direction: 'left' | 'right' }>`
+  .flyout-children-enter {
+    top: 0;
+    ${props =>
+      props.direction === 'left' &&
+      `
+      left: 99%;
+    `}
+    ${props =>
+      props.direction === 'right' &&
+      `
+      left: -99%;
+    `}
+    opacity: 0.01;
+    position: absolute;
+  }
+
+  .flyout-children-enter.flyout-children-enter-active {
+    opacity: 1;
+    left: 0;
+    transition: left ${duration}ms, opacity ${duration}ms;
+  }
+
+  .flyout-children-leave {
+    position: absolute;
+    opacity: 1;
+    left: 0;
+    top: 0;
+  }
+
+  .flyout-children-leave.flyout-children-leave-active {
+    ${props =>
+      props.direction === 'left' &&
+      `
+      left: -99%;
+    `}
+    ${props =>
+      props.direction === 'right' &&
+      `
+      left: 99%;
+    `}
+    opacity: 0.01;
+    transition: left ${duration}ms, opacity ${duration}ms;
+  }
+`
+
 export const FlyoutWrapper = styled.div`
+  width: 100%;
+  box-sizing: border-box;
   padding: 40px;
   ${media.tablet`
     padding: 20px;
@@ -40,6 +91,7 @@ export const FlyoutWrapper = styled.div`
 
 type OwnProps = {
   'data-e2e': E2EType
+  direction?: 'left' | 'right'
   in: boolean
   onClose: () => void
   position: number
@@ -62,7 +114,15 @@ class Flyout extends React.PureComponent<OwnProps> {
             type={'flyout'}
             style={{ ...defaultStyle, ...transitionStyles[status] }}
           >
-            {children}
+            <FlyoutChildren direction={this.props.direction || 'left'}>
+              <ReactCSSTransitionGroup
+                transitionName='flyout-children'
+                transitionEnterTimeout={duration}
+                transitionLeaveTimeout={duration}
+              >
+                {children}
+              </ReactCSSTransitionGroup>
+            </FlyoutChildren>
           </FlyoutModal>
         )}
       </Transition>

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
@@ -102,6 +102,7 @@ export const setStep = (
   payload:
     | { offer: OfferType; step: 'CHECKOUT' }
     | { loan: LoanType; step: 'DETAILS' }
+    | { loan: LoanType; step: 'ADD_COLLATERAL' }
 ): BorrowActionTypes => ({
   type: AT.SET_STEP,
   payload:

diff --git a/packages/blockchain-wallet-v4-frontend/src/data/components/borrow/model.ts b/packages/blockchain-wallet-v4-frontend/src/data/components/borrow/model.ts
@@ -5,6 +5,12 @@ export const INVALID_COIN_TYPE = 'Invalid coin type'
 
 export const NO_OFFER_EXISTS = 'NO_OFFER_EXISTS'
 
+export const BORROW_STEPS = {
+  CHECKOUT: 0,
+  DETAILS: 1,
+  ADD_COLLATERAL: 2
+}
+
 export const getCollateralizationColor = (
   displayName: 'safe' | 'risky' | 'unsafe'
 ) => {

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/AddCollateral/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/AddCollateral/index.tsx
@@ -0,0 +1,45 @@
+import { actions } from 'data'
+import { bindActionCreators, Dispatch } from 'redux'
+import { connect } from 'react-redux'
+import { FlyoutWrapper } from 'components/Flyout'
+import { LoanType } from 'core/types'
+import React, { Component } from 'react'
+
+type LinkDispatchPropsType = {
+  borrowActions: typeof actions.components.borrow
+}
+type OwnProps = {
+  loan: LoanType
+}
+type Props = OwnProps & LinkDispatchPropsType
+type State = {}
+
+export class AddCollateral extends Component<Props, State> {
+  state = {}
+
+  render () {
+    return (
+      <FlyoutWrapper
+        onClick={() =>
+          this.props.borrowActions.setStep({
+            step: 'DETAILS',
+            loan: this.props.loan
+          })
+        }
+      >
+        Go Back
+      </FlyoutWrapper>
+    )
+  }
+}
+
+const mapStateToProps = state => ({})
+
+const mapDispatchToProps = (dispatch: Dispatch): LinkDispatchPropsType => ({
+  borrowActions: bindActionCreators(actions.components.borrow, dispatch)
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(AddCollateral)
diff --git a/...blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowDetails/CollateralWarning/index.tsx b/...blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowDetails/CollateralWarning/index.tsx
@@ -5,11 +5,10 @@ import { model } from 'data'
 import { OfferType } from 'core/types'
 import { OwnProps, SuccessStateType } from '..'
 import { percentageFormatter } from '../CollateralizationBar'
+import { Props } from '../template.success'
 import React from 'react'
 import styled from 'styled-components'
 
-type Props = OwnProps & SuccessStateType & { offer: OfferType }
-
 const {
   getCollateralizationDisplayName,
   getCollateralAmtRequired
@@ -43,7 +42,7 @@ const CustomButton = styled(Button)`
   margin-top: 16px;
 `
 
-const CollateralWarning: React.FC<Props> = props => {
+const CollateralWarning: React.FC<Props & { offer: OfferType }> = props => {
   const { offer } = props
   const currentCollateralStatus = getCollateralizationDisplayName(
     props.loan.collateralisationRatio,
@@ -66,7 +65,15 @@ const CollateralWarning: React.FC<Props> = props => {
                 }}
               />
             </Text>
-            <CustomButton nature='primary'>
+            <CustomButton
+              onClick={() =>
+                props.borrowActions.setStep({
+                  step: 'ADD_COLLATERAL',
+                  loan: props.loan
+                })
+              }
+              nature='primary'
+            >
               <Text color='white' size='14px' weight={600}>
                 <FormattedMessage
                   id='scenes.borrow.addcollateral'
@@ -102,7 +109,15 @@ const CollateralWarning: React.FC<Props> = props => {
                 }}
               />
             </Text>
-            <CustomButton nature='primary'>
+            <CustomButton
+              onClick={() =>
+                props.borrowActions.setStep({
+                  step: 'ADD_COLLATERAL',
+                  loan: props.loan
+                })
+              }
+              nature='primary'
+            >
               <Text color='white' size='14px' weight={600}>
                 <FormattedMessage
                   id='scenes.borrow.addcollateral'
@@ -129,6 +144,22 @@ const CollateralWarning: React.FC<Props> = props => {
                 }}
               />
             </Text>
+            <CustomButton
+              onClick={() =>
+                props.borrowActions.setStep({
+                  step: 'ADD_COLLATERAL',
+                  loan: props.loan
+                })
+              }
+              nature='primary'
+            >
+              <Text color='white' size='14px' weight={600}>
+                <FormattedMessage
+                  id='scenes.borrow.addcollateral'
+                  defaultMessage='Add Collateral'
+                />
+              </Text>
+            </CustomButton>
           </div>
         </Container>
       )

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowDetails/Header/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowDetails/Header/index.tsx
@@ -1,10 +1,9 @@
 import { FormattedMessage } from 'react-intl'
 import { OwnProps, SuccessStateType } from '..'
+import { Props } from '../template.success'
 import { Text } from 'blockchain-info-components'
 import React from 'react'
 
-type Props = OwnProps & SuccessStateType
-
 const Header: React.FC<Props> = props => {
   return (
     <Text color='grey900' size='20px' weight={600}>

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowDetails/Info/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowDetails/Info/index.tsx
@@ -2,6 +2,7 @@ import { Exchange } from 'blockchain-wallet-v4/src'
 import { FormattedMessage } from 'react-intl'
 import { OfferType } from 'core/types'
 import { OwnProps, SuccessStateType } from '..'
+import { Props } from '../template.success'
 import { Text } from 'blockchain-info-components'
 import CollateralizationBar from '../CollateralizationBar'
 import CollateralWarning from '../CollateralWarning'
@@ -24,9 +25,7 @@ const AmountsHeader = styled(Text)`
   color: ${props => props.theme.grey600};
 `
 
-type Props = OwnProps & SuccessStateType & { offer: OfferType }
-
-const Info: React.FC<Props> = props => {
+const Info: React.FC<Props & { offer: OfferType }> = props => {
   const principalDisplayName =
     props.supportedCoins[props.loan.principal.amount[0].symbol].displayName
   const collateralSatoshi = Exchange.convertBtcToBtc({

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowDetails/NewLoanInfo/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowDetails/NewLoanInfo/index.tsx
@@ -1,11 +1,10 @@
 import { FormattedMessage } from 'react-intl'
 import { Icon, Text } from 'blockchain-info-components'
 import { OwnProps, SuccessStateType } from '..'
+import { Props } from '../template.success'
 import React from 'react'
 import styled from 'styled-components'
 
-type Props = OwnProps & SuccessStateType
-
 const Wrapper = styled.div`
   margin-top: 40px;
   margin-bottom: 64px;

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowDetails/index.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowDetails/index.tsx
@@ -10,6 +10,7 @@ import {
 } from 'core/types'
 import { RatesType } from 'data/types'
 import { RootState } from 'data/rootReducer'
+import Loading from './template.loading'
 import React, { Component } from 'react'
 import Success from './template.success'
 
@@ -43,8 +44,8 @@ class BorrowDetails extends Component<Props> {
     return this.props.data.cata({
       Success: val => <Success {...val} {...this.props} />,
       Failure: e => (typeof e === 'object' ? e.message : e),
-      Loading: () => <div>Loading</div>,
-      NotAsked: () => <div>Loading</div>
+      Loading: () => <Loading />,
+      NotAsked: () => <Loading />
     })
   }
 }

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowDetails/template.loading.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowDetails/template.loading.tsx
@@ -2,21 +2,24 @@ import { SpinningLoader, Text } from 'blockchain-info-components'
 import React from 'react'
 import styled from 'styled-components'
 
+interface Props {}
+
 const Wrapper = styled.div`
   width: 100%;
   height: 100%;
+  position: absolute;
   align-items: center;
   justify-content: center;
   display: flex;
   flex-direction: column;
 `
 
-const Loading: React.FC<{}> = () => {
+const Loading: React.FC<Props> = () => {
   return (
     <Wrapper>
       <SpinningLoader />
       <Text weight={600} color='grey600' style={{ marginTop: '24px' }}>
-        Doing Work...
+        Gathering Info...
       </Text>
     </Wrapper>
   )

diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowDetails/template.success.tsx b/packages/blockchain-wallet-v4-frontend/src/modals/Borrow/BorrowDetails/template.success.tsx
@@ -1,12 +1,12 @@
 import { FlyoutWrapper } from 'components/Flyout'
-import { OwnProps, SuccessStateType } from '.'
+import { LinkDispatchPropsType, OwnProps, SuccessStateType } from '.'
 import Header from './Header'
 import Info from './Info'
 import NewLoanInfo from './NewLoanInfo'
 import React from 'react'
 import Summary from './Summary'
 
-type Props = OwnProps & SuccessStateType
+export type Props = OwnProps & SuccessStateType & LinkDispatchPropsType
 
 const Success: React.FC<Props> = props => {
   // debugging