Show payments.

Issue #17

conf/webpack/Dev.js

@@ -17,11 +17,11 @@ class WebpackDevConfig extends WebpackBaseConfig {
       //   'webpack/hot/only-dev-server',
       //   'react-hot-loader/patch',
         './client.js'
-      ],
-      plugins: [
-        // new webpack.HotModuleReplacementPlugin(),
-        new webpack.NoEmitOnErrorsPlugin()
       ]
+      // plugins: [
+      //   // new webpack.HotModuleReplacementPlugin(),
+      //   new webpack.NoEmitOnErrorsPlugin()
+      // ]
     }
   }
 }

src/containers/payments/index.js

@@ -4,10 +4,6 @@ import { connect } from 'react-redux'
 
 import Payments from '../../views/payments/index'
 
-import {
-
-} from '../../actions/payments'
-
 import {
   getAllPayments
 } from '../../reducers'

src/containers/payments/show.js

@@ -0,0 +1,22 @@
+import React from 'react'
+
+import { connect } from 'react-redux'
+
+import ShowPayment from '../../views/payments/show'
+
+import {
+  getPaymentById
+} from '../../reducers'
+
+const render = props => {
+  return <ShowPayment {...props} />
+}
+
+const mapStateToProps = (state, { match }) => ({
+  payment: getPaymentById(state, match.params.id)
+})
+
+const mapDispatchToProps = (dispatch, { history, match }) => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(render)

src/routes/index.js

@@ -1,7 +1,8 @@
 import React from 'react'
 import {
   HashRouter,
-  Route
+  Route,
+  Switch
 } from 'react-router-dom'
 
 import AppLayout from '../views/layouts'
@@ -13,9 +14,11 @@ import Settings from '../containers/settings'
 export default () => (
   <HashRouter>
     <AppLayout>
-      <Route path='/' exact component={Dashboard} />
-      <Payments />
-      <Route path='/settings' exact component={Settings} />
+      <Switch>
+        <Route path='/' exact component={Dashboard} />
+        <Route path='/settings' exact component={Settings} />
+        <Payments />
+      </Switch>
     </AppLayout>
   </HashRouter>
 )

src/routes/payments.js

@@ -5,11 +5,13 @@ import { Route, Switch } from 'react-router-dom'
 import Payments from '../containers/payments'
 import CreatePayment from '../containers/payments/create'
 import SendPayment from '../containers/payments/send'
+import ShowPayment from '../containers/payments/show'
 
 export default () => (
   <Switch>
     <Route exact path='/payments' component={Payments} />
     <Route exact path='/payments/:id/create' component={CreatePayment} />
     <Route exact path='/payments/:id/send' component={SendPayment} />
+    <Route exact path='/payments/:id' component={ShowPayment} />
   </Switch>
 )

src/styles/_components.app.scss

@@ -0,0 +1,3 @@
+.c-header {
+
+}

src/styles/_elements.util.scss

@@ -6,3 +6,12 @@ a {
 small, %small {
   font-size: $small-font-size;
 }
+
+th {
+  font-weight: 500;
+
+  &[scope='row'] {
+    vertical-align: text-top;
+    text-align: left;
+  }
+}

src/views/payments/index.js

@@ -1,37 +1,32 @@
-import Big from 'big.js'
+import { format } from 'date-fns'
+
 import React, { Fragment } from 'react'
 
+import { Link } from 'react-router-dom'
+
 import Icon from '../../components/Icon'
 
+import {
+  formatCurrency
+} from './show'
+
 const {
   Blob,
   URL
 } = window
 
-const formatDate = (dateString) => new Date(dateString).toLocaleString()
-// {
-//   const date = new Date(dateString)
-//   return `${date.toLocaleDateString()} – ${date.toLocaleTimeString()}`
-// }
-
-const getAmount = (receivedAmount, rate, fiatCurrency) => {
-  try {
-    return `${new Big(receivedAmount).times(rate).toFixed(2)} ${fiatCurrency}`
-  } catch (e) {
-    return '—'
-  }
-}
-
 const ListItem = ({id, receivedAmount, rate, fiatCurrency, updatedAt, paymentId}) => (
-  <li className='c-payments__item o-list-bare__item u-padding-vertical u-padding-horizontal-small o-flex o-flex--ai-center'>
-    <span className={`o-circle u-notice--${receivedAmount ? 'success' : 'error'}`} />
-    <span className='o-flex__stretch u-margin-horizontal o-flex o-flex--col o-flex--jc-center u-smaller'>
-      <span>{formatDate(updatedAt)}</span>
-      <span>{paymentId || '—'}</span>
-    </span>
-    <span className='u-medium'>
-      {getAmount(receivedAmount, rate, fiatCurrency)}
-    </span>
+  <li className='c-payments__item o-list-bare__item u-padding-vertical u-padding-horizontal-small'>
+    <Link to={`/payments/${id}`} className='o-flex o-flex--ai-center'>
+      <span className={`o-circle u-notice--${receivedAmount ? 'success' : 'error'}`} />
+      <span className='o-flex__stretch u-margin-horizontal o-flex o-flex--col o-flex--jc-center u-smaller'>
+        <span>{format(updatedAt, 'MM/DD/YYYY – HH:MM')}</span>
+        <span>{paymentId || '—'}</span>
+      </span>
+      <span className='u-medium'>
+        {formatCurrency(receivedAmount, fiatCurrency, rate)}
+      </span>
+    </Link>
   </li>
 )
 

src/views/payments/show.js

@@ -0,0 +1,65 @@
+import Big from 'big.js'
+
+import { format } from 'date-fns'
+
+import React, { Fragment } from 'react'
+
+import Icon from '../../components/Icon'
+
+export default ({payment: {
+  address, convertedAmount, createdAt, fiatCurrency, height, id, integratedAddress,
+  paymentId, rate, receipt, receivedAmount, requestedAmount, updatedAt, uri }}
+) => (
+  <Fragment>
+    <div className='o-app__content u-margin-horizontal' style={{margin: '54px 0'}}>
+      <table className='o-table o-table--tiny u-margin-top'>
+        <tbody>
+          <tr>
+            <th scope='row'>Exchange Rate</th>
+            <td className='u-align-right'>{rate} {fiatCurrency}/XMR</td>
+          </tr>
+          <tr>
+            <th scope='row'>Amount Requested</th>
+            <td className='u-align-right'>
+              {formatCurrency(requestedAmount, fiatCurrency)}<br />
+              <small>{formatCurrency(convertedAmount)}</small>
+            </td>
+          </tr>
+          <tr>
+            <th scope='row'>Amount Received</th>
+            <td className='u-align-right'>
+              {formatCurrency(receivedAmount, fiatCurrency, rate)}<br />
+              <small>{formatCurrency(receivedAmount)}</small>
+            </td>
+          </tr>
+          <tr>
+            <th scope='row'>Tip</th>
+            <td className='u-align-right'>
+              {(receivedAmount && formatCurrency(new Big(receivedAmount).times(rate).minus(requestedAmount), fiatCurrency)) || '—'}<br />
+              <small>{(receivedAmount && formatCurrency(new Big(receivedAmount).minus(convertedAmount))) || '—'}</small>
+            </td>
+          </tr>
+          <tr>
+            <th scope='row'>Created</th>
+            <td className='u-align-right'>
+              {format(createdAt, 'MM/DD/YYYY – HH:MM')}
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <div className='o-app__top-left'>
+      <Icon href='/payments' name='back' />
+    </div>
+    <div className='o-app__header'>Payment Details</div>
+  </Fragment>
+)
+
+export const formatCurrency = (amount, fiatCurrency = null, rate = 1) => {
+  try {
+    const decimals = fiatCurrency === null ? 12 : 2
+    return `${new Big(amount).times(rate).toFixed(decimals)} ${fiatCurrency || 'XMR'}`
+  } catch (e) {
+    return '—'
+  }
+}