style(order review page)

blockchain · May 23, 2018 · baec25f · baec25f
1 parent aaf7829
commit baec25f
Show file tree

Hide file tree

Showing 3 changed files with 47 additions and 47 deletions.
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
@@ -42,7 +42,8 @@ const renderDetailsRow = (id, message, value, color) => (
 )
 
 const renderRate = (rate, q) => {
-  return <FormattedMessage id='rate' defaultMessage='{rate}' values={{ rate: `${currencySymbolMap[q.baseCurrency]}${rate.toLocaleString()}` }} />
+  return <FormattedMessage id='rate' defaultMessage='{rate}'
+    values={{ rate: `${currencySymbolMap[q.baseCurrency]}${rate.toLocaleString()}` }} />
 }
 
 export const OrderDetails = ({ quoteR, onRefreshQuote, type, medium }) => (
@@ -51,9 +52,10 @@ export const OrderDetails = ({ quoteR, onRefreshQuote, type, medium }) => (
       <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.' />
+      <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') }}>
+    <ExchangeRateWrapper>
       <Text size='12px' weight={500} style={spacing('mr-10')}>
         <FormattedMessage id='exchange_rate' defaultMessage='Exchange Rate' />
       </Text>
@@ -64,40 +66,32 @@ export const OrderDetails = ({ quoteR, onRefreshQuote, type, medium }) => (
           return renderRate(rate, q)
         }).getOrElse('~')}
       </Text>
-      <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)}
-    </div>
+    </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>
 )
 
@@ -109,7 +103,11 @@ export const OrderSubmit = ({ quoteR, onSubmit, busy, clearTradeError, goToStep
           <Text weight={300} color='error' size='13px' style={spacing('mb-5')}>
             Sorry, something went wrong with your trade: { busy.error_description }
           </Text>
-          <span><StepTransition restart Component={Link} weight={300} size='13px'><FormattedMessage id='try_again' defaultMessage='Try again' /></StepTransition></span>
+          <span>
+            <StepTransition restart Component={Link} weight={300} size='13px'>
+              <FormattedMessage id='try_again' defaultMessage='Try again' />
+            </StepTransition>
+          </span>
         </div>
         : <Fragment>
           <Button

diff --git a/...ontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/SelectAccounts/template.success.js b/...ontend/src/scenes/BuySell/CoinifyCheckout/Content/Sell/SelectAccounts/template.success.js
@@ -58,7 +58,7 @@ const SelectAccounts = (props) => {
       </ColLeft>
       <ColRight>
         <ColRightInner>
-          <StepTransition next Component={Button} style={spacing('mt-45')} nature='primary'
+          <StepTransition to={4} Component={Button} style={spacing('mt-45')} nature='primary'
             fullwidth disabled={submitting || invalid || noRadioButtonSelected}>
             <FormattedMessage id='coinifyexchangedata.selectaccounts.continue' defaultMessage='Continue' />
           </StepTransition>

diff --git a/packages/blockchain-wallet-v4-frontend/src/services/CoinifyService/index.js b/packages/blockchain-wallet-v4-frontend/src/services/CoinifyService/index.js
@@ -62,32 +62,34 @@ export const reviewOrder = {
     const qAmt = Math.abs(q.quoteAmount)
     const bAmt = Math.abs(q.baseAmount)
     const med = reviewOrder.hasMedium(q.paymentMediums, medium)
+    const fee = Math.abs(q.paymentMediums[med]['fee'])
+    const totalBase = Math.abs((q.paymentMediums[med]['total']).toFixed(2))
     if (type === 'buy') {
       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)}`
+          fee: `${currencySymbolMap[q.quoteCurrency]}${fee.toFixed(2)}`,
+          total: `${currencySymbolMap[q.quoteCurrency]}${(qAmt + 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)}`
+          fee: `${currencySymbolMap[q.baseCurrency]}${fee.toFixed(2)}`,
+          total: `${currencySymbolMap[q.baseCurrency]}${totalBase}`
         }
       }
     } 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)}`
+          fee: `${currencySymbolMap[q.quoteCurrency]}${fee.toFixed(2)}`,
+          total: `${currencySymbolMap[q.quoteCurrency]}${(qAmt + 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)}`
+          fee: `${currencySymbolMap[q.baseCurrency]}${fee.toFixed(2)}`,
+          total: `${currencySymbolMap[q.baseCurrency]}${totalBase}`
         }
       }
     }