refactor(update coinify components)

blockchain · May 10, 2018 · d83e0e3 · d83e0e3
1 parent f95c502
commit d83e0e3
Show file tree

Hide file tree

Showing 10 changed files with 79 additions and 109 deletions.
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/CoinifyExchangeData/Order/index.js b/packages/blockchain-wallet-v4-frontend/src/modals/CoinifyExchangeData/Order/index.js
diff --git a/packages/blockchain-wallet-v4-frontend/src/modals/CoinifyExchangeData/index.js b/packages/blockchain-wallet-v4-frontend/src/modals/CoinifyExchangeData/index.js
@@ -6,12 +6,8 @@ import { connect } from 'react-redux'
 import StepIndicator from 'components/StepIndicator'
 import Tray from 'components/Tray'
 import Create from './Create'
-import Order from './Order'
-import Payment from './Payment'
 import Confirm from './Confirm'
 import ISignThis from './ISignThis'
-import AddBankDetails from './AddBankDetails'
-import AddCustomerDetails from './AddCustomerDetails'
 import { ModalHeader, ModalBody } from 'blockchain-info-components'
 import { FormattedMessage } from 'react-intl'
 import { getData } from './selectors'
@@ -22,9 +18,7 @@ class SfoxExchangeData extends React.PureComponent {
     super()
     this.state = { show: false }
     this.stepMap = {
-      order: <FormattedMessage id='modals.coinifyexchangedata.steps.order' defaultMessage='Order' />,
       verify: <FormattedMessage id='modals.coinifyexchangedata.steps.verify' defaultMessage='Verify' />,
-      payment: <FormattedMessage id='modals.coinifyexchangedata.steps.payment' defaultMessage='Payment' />,
       submit: <FormattedMessage id='modals.coinifyexchangedata.steps.submit' defaultMessage='Submit' />
     }
   }
@@ -44,11 +38,7 @@ class SfoxExchangeData extends React.PureComponent {
     switch (step) {
       case 'account': return <Create />
       case 'isx': return <ISignThis />
-      case 'order': return <Order />
-      case 'payment': return <Payment />
       case 'confirm': return <Confirm />
-      case 'bankdetails': return <AddBankDetails />
-      case 'customerdetails': return <AddCustomerDetails />
     }
   }
 

diff --git a/...ockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/KYCNotification.js b/...ockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/KYCNotification.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import { FormattedMessage } from 'react-intl'
 import styled from 'styled-components'
 import { Text, Button } from 'blockchain-info-components'
 import { kycHeaderHelper, kycNotificationBodyHelper, kycNotificationButtonHelper } from 'services/CoinifyService'

diff --git a/...s/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/OrderReview.js b/...s/blockchain-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/OrderReview.js
@@ -5,17 +5,28 @@ import { Remote } from 'blockchain-wallet-v4/src'
 import FaqRow from 'components/Faq/FaqRow'
 import CountdownTimer from 'components/Form/CountdownTimer'
 import { Wrapper as ExchangeCheckoutWrapper } from '../../ExchangeCheckout'
-import { flex, spacing } from 'services/StyleService'
+import { spacing } from 'services/StyleService'
 import { reviewOrder } from 'services/CoinifyService'
 import { FormattedMessage } from 'react-intl'
 import { OrderDetailsTable, OrderDetailsRow } from 'components/BuySell/OrderDetails'
 import { StepTransition } from 'components/Utilities/Stepper'
 
+const ExchangeRateWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  margin-top: 20px;
+`
 const StyledFaqRow = styled(FaqRow)`
   padding: 20px 0px;
   border-bottom: 1px solid ${props => props.theme['gray-1']};
 `
 const CancelWrapper = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  margin-top: 15px;
   a {
     color: #545456;
     font-weight: 300;
@@ -30,49 +41,52 @@ const renderDetailsRow = (id, message, value, color) => (
   </OrderDetailsRow>
 )
 
-export const OrderDetails = ({ quoteR, onRefreshQuote, type, medium }) => (
-  <ExchangeCheckoutWrapper>
-    <Text size='32px' weight={600} style={spacing('mb-10')}>
-      <FormattedMessage id='buy.almost_there' defaultMessage="You're almost there" />
-    </Text>
-    <Text size='14px' weight={300} style={spacing('mb-20')}>
-      <FormattedMessage id='buy.review_order_subtext' defaultMessage='Before we can start processing your order, review the order details below. If everything looks good to you, click submit to complete your order.' />
-    </Text>
-    <div style={{ ...flex('row align/center justify/end'), ...spacing('mt-20') }}>
-      <Text size='12px' weight={500} style={spacing('mr-10')}>
-        <FormattedMessage id='exchange_rate' defaultMessage='Exchange Rate' />
+export const OrderDetails = ({ quoteR, onRefreshQuote, type, medium }) => {
+  console.log(type, medium)
+  return (
+    <ExchangeCheckoutWrapper>
+      <Text size='32px' weight={600} style={spacing('mb-10')}>
+        <FormattedMessage id='buy.almost_there' defaultMessage="You're almost there" />
       </Text>
-      <Text size='12px' weight={300}>
-        1 BTC = {quoteR.map((q) => `$${q.rate}`).getOrElse('~')}
+      <Text size='14px' weight={300} style={spacing('mb-20')}>
+        <FormattedMessage id='buy.review_order_subtext' defaultMessage='Please confirm your order details before continuing.' />
       </Text>
-    </div>
-    <OrderDetailsTable style={spacing('mt-10')}>
-      {renderDetailsRow(
-        'order_details.amount_to_transact',
-        type === 'buy' ? 'BTC Amount to Purchase' : 'BTC Amount to Sell',
-        quoteR.map(q => reviewOrder.renderSummary(q, type, medium)).data.firstRow
-      )}
-      {renderDetailsRow(
-        'order_details.trading_fee',
-        'Trading Fee',
-        quoteR.map(q => reviewOrder.renderSummary(q, type, medium)).data.fee
-      )}
-      {renderDetailsRow(
-        'order_details.total_transacted',
-        type === 'buy' ? 'Total Cost' : 'Total to be Received',
-        quoteR.map(q => reviewOrder.renderSummary(q, type, medium)).data.total,
-        'success'
-      )}
-    </OrderDetailsTable>
-    {quoteR.map((q) => (
-      <CountdownTimer
-        style={spacing('mt-20')}
-        expiryDate={q.expiresAt.getTime()}
-        handleExpiry={onRefreshQuote}
-      />
-    )).getOrElse(null)}
-  </ExchangeCheckoutWrapper>
-)
+      <ExchangeRateWrapper>
+        <Text size='12px' weight={500} style={spacing('mr-10')}>
+          <FormattedMessage id='exchange_rate' defaultMessage='Exchange Rate' />
+        </Text>
+        <Text size='12px' weight={300}>
+          1 BTC = {quoteR.map((q) => `$${q.rate}`).getOrElse('~')}
+        </Text>
+      </ExchangeRateWrapper>
+      <OrderDetailsTable style={spacing('mt-10')}>
+        {renderDetailsRow(
+          'order_details.amount_to_transact',
+          type === 'buy' ? 'BTC Amount to Purchase' : 'BTC Amount to Sell',
+          quoteR.map(q => reviewOrder.renderSummary(q, type, medium)).data.firstRow
+        )}
+        {renderDetailsRow(
+          'order_details.trading_fee',
+          'Trading Fee',
+          quoteR.map(q => reviewOrder.renderSummary(q, type, medium)).data.fee
+        )}
+        {renderDetailsRow(
+          'order_details.total_transacted',
+          type === 'buy' ? 'Total Cost' : 'Total to be Received',
+          quoteR.map(q => reviewOrder.renderSummary(q, type, medium)).data.total,
+          'success'
+        )}
+      </OrderDetailsTable>
+      {quoteR.map((q) => (
+        <CountdownTimer
+          style={spacing('mt-20')}
+          expiryDate={q.expiresAt.getTime()}
+          handleExpiry={onRefreshQuote}
+        />
+      )).getOrElse(null)}
+    </ExchangeCheckoutWrapper>
+  )
+}
 
 export const OrderSubmit = ({ quoteR, onSubmit, busy, clearTradeError, goToStep }) => (
   <Fragment>
@@ -95,7 +109,7 @@ export const OrderSubmit = ({ quoteR, onSubmit, busy, clearTradeError, goToStep
                 : <FormattedMessage id='submit' defaultMessage='Submit' />
             }
           </Button>
-          <CancelWrapper style={{ ...flex('row justify/center'), ...spacing('mt-15') }}>
+          <CancelWrapper>
             <StepTransition restart Component={Link}>
               <FormattedMessage id='cancel' defaultMessage='Cancel' />
             </StepTransition>

diff --git a/...inifyExchangeData/AddBankDetails/index.js → ...kout/Content/Sell/AddBankDetails/index.js b/...inifyExchangeData/AddBankDetails/index.js → ...kout/Content/Sell/AddBankDetails/index.js
diff --git a/...fyExchangeData/AddBankDetails/template.js → ...t/Content/Sell/AddBankDetails/template.js b/...fyExchangeData/AddBankDetails/template.js → ...t/Content/Sell/AddBankDetails/template.js
diff --git a/...yExchangeData/AddCustomerDetails/index.js → .../Content/Sell/AddCustomerDetails/index.js b/...yExchangeData/AddCustomerDetails/index.js → .../Content/Sell/AddCustomerDetails/index.js
diff --git a/...changeData/AddCustomerDetails/template.js → ...ntent/Sell/AddCustomerDetails/template.js b/...changeData/AddCustomerDetails/template.js → ...ntent/Sell/AddCustomerDetails/template.js
diff --git a/...in-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/template.success.js b/...in-wallet-v4-frontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/template.success.js
@@ -7,8 +7,8 @@ import * as service from 'services/CoinifyService'
 import Stepper, { StepView } from 'components/Utilities/Stepper'
 import OrderCheckout from '../OrderCheckout'
 import { OrderDetails, OrderSubmit } from '../OrderReview'
-import AddBankDetails from 'modals/CoinifyExchangeData/AddBankDetails'
-import AddCustomerDetails from 'modals/CoinifyExchangeData/AddCustomerDetails'
+import AddBankDetails from './AddBankDetails'
+import AddCustomerDetails from './AddCustomerDetails'
 import ISignThis from 'modals/CoinifyExchangeData/ISignThis'
 
 const CheckoutWrapper = styled.div`

diff --git a/packages/blockchain-wallet-v4-frontend/src/services/CoinifyService/index.js b/packages/blockchain-wallet-v4-frontend/src/services/CoinifyService/index.js
@@ -52,11 +52,14 @@ export const mockedLimits = {
 export const reviewOrder = {
   baseBtc: (q) => q.baseCurrency === 'BTC',
   hasMedium: (paymentMediums, medium) => {
-    const hasMedium = has(medium)
-    if (hasMedium(paymentMediums)) return medium
-    else return medium === 'bank' ? 'card' : 'bank'
+    if (paymentMediums && has(medium, paymentMediums)) {
+      return medium
+    } else {
+      return medium === 'bank' ? 'card' : 'bank'
+    }
   },
   renderSummary: (q, type, medium) => {
+    console.log(q)
     const qAmt = Math.abs(q.quoteAmount)
     const bAmt = Math.abs(q.baseAmount)
     const med = reviewOrder.hasMedium(q.paymentMediums, medium)
@@ -74,9 +77,19 @@ export const reviewOrder = {
           total: `${currencySymbolMap[q.baseCurrency]}${(q.paymentMediums[med]['total']).toFixed(2)}`
         }
       }
-    } else {
-      if (this.baseBtc(q)) {
-
+    } else { // type = sell
+      if (reviewOrder.baseBtc(q)) {
+        return {
+          firstRow: `${bAmt / 1e8} BTC (${currencySymbolMap[q.quoteCurrency]}${qAmt.toFixed(2)})`,
+          fee: `${currencySymbolMap[q.quoteCurrency]}${(+q.paymentMediums[med]['fee']).toFixed(2)}`,
+          total: `${currencySymbolMap[q.quoteCurrency]}${(qAmt + q.paymentMediums[med]['fee']).toFixed(2)}`
+        }
+      } else {
+        return {
+          firstRow: `${qAmt / 1e8} BTC (${currencySymbolMap[q.baseCurrency]}${bAmt.toFixed(2)})`,
+          fee: `${currencySymbolMap[q.baseCurrency]}${(q.paymentMediums[med]['fee']).toFixed(2)}`,
+          total: `${currencySymbolMap[q.baseCurrency]}${(q.paymentMediums[med]['total']).toFixed(2)}`
+        }
       }
     }
   }