Merge branch 'payment-history'

Issue #17

src/containers/payments/index.js

@@ -0,0 +1,26 @@
+import React from 'react'
+
+import { connect } from 'react-redux'
+
+import Payments from '../../views/payments/index'
+
+import {
+
+} from '../../actions/payments'
+
+import {
+  getAllPayments
+} from '../../reducers'
+
+const render = props => {
+  return <Payments {...props} />
+}
+
+const mapStateToProps = (state, { match }) => ({
+  payments: getAllPayments(state)
+})
+
+const mapDispatchToProps = (dispatch, { history, match }) => ({
+})
+
+export default connect(mapStateToProps, mapDispatchToProps)(render)

src/reducers/index.js

@@ -14,7 +14,7 @@ const reducers = {
 export default combineReducers(reducers)
 
 export const getAllPayments = (state) =>
-  fromPayments.getAllPayments(state)
+  fromPayments.getAllPayments(state.payments)
 
 export const getPaymentById = (state, id) =>
   fromPayments.getPaymentById(state.payments, id)

src/routes/payments.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { Route, Switch } from 'react-router-dom'
 
-import Payments from '../views/payments'
+import Payments from '../containers/payments'
 import CreatePayment from '../containers/payments/create'
 import SendPayment from '../containers/payments/send'
 

src/styles/_components.payments.scss

@@ -23,3 +23,9 @@
     }
   }
 }
+
+.c-payments__item {
+  &:not(:last-child) {
+    border-bottom: 1px solid $divider-color;
+  }
+}

src/styles/_elements.forms.scss

@@ -5,7 +5,7 @@ input, %input, select, %select, textarea, %textarea {
 }
 
 input:disabled, %input--disabled {
-  background-color: #eee;
+  background-color: $disabled-color;
 }
 
 button:focus, input:focus, %input--focus {

src/styles/_objects.app.scss

@@ -59,8 +59,11 @@
 .o-app__content {
   grid-row: 1 / 4;
   grid-column: 1 / 4;
+
+  overflow-y: auto;
 }
 
 .o-app__footer {
   grid-area: footer;
+  z-index: 1;
 }

src/styles/_objects.circle.scss

@@ -0,0 +1,5 @@
+.o-circle {
+  width: $base-spacing-unit * 1.5;
+  height: $base-spacing-unit * 1.5;
+  border-radius: 50%;
+}

src/styles/_objects.flex.scss

@@ -6,10 +6,14 @@
   flex-direction: column
 }
 
-.o-flex--center {
+.o-flex--jc-center {
   justify-content: center;
 }
 
+.o-flex--ai-center {
+  align-items: center;
+}
+
 .o-flex__stretch {
   flex: 1;
 }

src/styles/_settings.colors.scss

@@ -7,3 +7,7 @@ $brand-dark: #DA4001;
 $background-color: #FFFFFF;
 $text-color: #4A4A4A;
 $disabled-color: #E8E8E8;
+$divider-color: #D8D8D8;
+
+$success-color: green;
+$error-color: red;

src/styles/_settings.type.scss

@@ -4,7 +4,7 @@ $inuit-global-font-size: 18px;
 $inuit-global-line-height: 24px;
 
 $small-font-size: 14px;
-$label-font-size: 15px;
+$label-font-size: 16px;
 $base-font-size: 18px;
 $large-font-size: 22px;
 $huge-font-size: 72px;

src/styles/_utilities.notice.scss

@@ -0,0 +1,7 @@
+.u-notice--success {
+  background-color: $success-color;
+}
+
+.u-notice--error {
+  background-color: $error-color;
+}

src/styles/_utilities.text.scss

@@ -21,3 +21,8 @@
 .u-brand-primary {
   color: $brand-primary;
 }
+
+.u-smaller {
+  font-size: $label-font-size;
+  line-height: 24px;
+}

src/styles/main.scss

@@ -30,6 +30,7 @@
 // OBJECTS
 @import 'objects.app';
 @import '~inuitcss/objects/objects.box';
+@import 'objects.circle';
 @import 'objects.content';
 @import 'objects.flex';
 @import '~inuitcss/objects/objects.list-bare';
@@ -52,4 +53,5 @@
 // UTILITIES
 @import '~inuitcss/utilities/utilities.spacings';
 @import 'utilities.alignments';
+@import 'utilities.notice.scss';
 @import 'utilities.text';

src/views/dashboard.js

@@ -36,7 +36,7 @@ const Dashboard = ({ onStartPayment, settings, lastPayment }) => (
             <small>Last payment</small>
           </div>
         </div>
-        <Link to='/payments' className='o-flex o-flex--center u-brand-primary u-medium u-margin-bottom'>
+        <Link to='/payments' className='o-flex o-flex--jc-center u-brand-primary u-medium u-margin-bottom'>
           <Icon name='history' className='icon--brand' />
           <span className='u-margin-left-tiny'>See history</span>
         </Link>

src/views/payments/index.js

@@ -1,15 +1,61 @@
+import Big from 'big.js'
 import React, { Fragment } from 'react'
 
 import Icon from '../../components/Icon'
 
-export default () => (
+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>
+)
+
+const download = (json) => {
+  const blob = new Blob([JSON.stringify(json, null, 2)], { type: 'application/json' })
+  return URL.createObjectURL(blob)
+}
+
+export default ({ payments }) => (
   <Fragment>
-    <div className='o-app__content o-content'>
-      <span>Coming soon™</span>
+    <div className='o-app__content' style={{margin: '54px 0'}}>
+      <ul className='c-payments o-list-bare u-margin-horizontal-small u-margin-vertical-none'>
+        { payments.map(payment => <ListItem key={payment.id} {...payment} />) }
+      </ul>
     </div>
     <div className='o-app__top-left'>
       <Icon href='/' name='back' />
     </div>
     <div className='o-app__header'>History</div>
+    <a className='c-btn o-app__footer'
+      href={download(payments)}
+      download={`kasisto-payments-${new Date().toISOString()}.json`}
+    >
+      Download
+    </a>
   </Fragment>
 )

src/views/payments/send.js

@@ -120,7 +120,7 @@ export default class SendPayment extends Component {
             <small className='u-margin-bottom-large'>{new Big(convertedAmount).add(new Big(tip || '0')).toFixed(12)} XMR</small>
 
             <div className='o-flex o-flex--col'>
-              <div className='o-flex o-flex--center u-margin-bottom'>
+              <div className='o-flex o-flex--jc-center u-margin-bottom'>
                 <PaymentRequest integratedAddress={integratedAddress} uri={uri} />
               </div>
             </div>