Add out of time and duration

4 files changed, 38 insertions, 4 deletions

diff --git a/app/components/Account.css b/app/components/Account.css
index 00b620fc7f..21aefef292 100644
--- a/app/components/Account.css
+++ b/app/components/Account.css
@@ -86,6 +86,10 @@
 	color: rgba(255, 255, 255, 0.8);
 }
 
+.account__row-value--error {
+  color: #d0021b;
+}
+
 .account__footer .button + .button {
   margin-top: 24px;
 }
\ No newline at end of file
diff --git a/app/components/Account.js b/app/components/Account.js
index 1e98a425d6..bb8236bc4c 100644
--- a/app/components/Account.js
+++ b/app/components/Account.js
@@ -1,5 +1,6 @@
+import moment from 'moment';
 import React, { Component, PropTypes } from 'react';
-import { If, Then } from 'react-if';
+import { If, Then, Else } from 'react-if';
 import { Layout, Container, Header } from './Layout';
 import { formatAccount } from '../lib/formatters';
 
@@ -24,7 +25,10 @@ export default class Account extends Component {
   }
 
   render() {
+    let paidUntil = moment(this.props.user.paidUntil);
     let formattedAccountId = formatAccount(this.props.user.account);
+    let formattedPaidUntil = paidUntil.format('LLLL');
+    let isOutOfTime = paidUntil.isSameOrBefore(moment());
 
     return (
       <Layout>
@@ -51,7 +55,14 @@ export default class Account extends Component {
 
                   <div className="account__row">
                     <div className="account__row-label">Paid until</div>
-                    <div className="account__row-value">4:20pm, 12 November 2017</div>
+                    <If condition={ isOutOfTime }>
+                      <Then>
+                        <div className="account__row-value account__row-value--error">OUT OF TIME</div>
+                      </Then>
+                      <Else>
+                        <div className="account__row-value">{ formattedPaidUntil }</div>
+                      </Else>
+                    </If>
                   </div>
 
                   <div className="account__footer">
diff --git a/app/components/Settings.css b/app/components/Settings.css
index 5485efd20e..c99c7bbcec 100644
--- a/app/components/Settings.css
+++ b/app/components/Settings.css
@@ -98,6 +98,10 @@
   color: rgba(255, 255, 255, 0.8);
 }
 
+.settings__account-paid-until-label--error {
+  color: #d0021b;
+}
+
 .settings__cell-footer {
   padding: 8px 24px 24px;
   font-family: "Open Sans";
diff --git a/app/components/Settings.js b/app/components/Settings.js
index c1b322c1da..0160dad519 100644
--- a/app/components/Settings.js
+++ b/app/components/Settings.js
@@ -1,5 +1,6 @@
+import moment from 'moment';
 import React, { Component, PropTypes } from 'react';
-import { If, Then } from 'react-if';
+import { If, Then, Else } from 'react-if';
 import { Layout, Container, Header } from './Layout';
 import Switch from './Switch';
 import CustomScrollbars from './CustomScrollbars';
@@ -34,6 +35,13 @@ export default class Settings extends Component {
 
   render() {
     const isLoggedIn = this.props.user.status === LoginState.ok;
+    let isOutOfTime, formattedPaidUntil;
+
+    if(isLoggedIn) {
+      let paidUntil = moment(this.props.user.paidUntil);
+      isOutOfTime = paidUntil.isSameOrBefore(moment());
+      formattedPaidUntil = paidUntil.fromNow(true) + ' left';
+    }
 
     return (
       <Layout>
@@ -57,7 +65,14 @@ export default class Settings extends Component {
                           <div className="settings__cell settings__cell--active" onClick={ this.props.onViewAccount }>
                             <div className="settings__cell-label">Account</div>
                             <div className="settings__cell-value">
-                              <span className="settings__account-paid-until-label">12 DAYS LEFT</span>
+                              <If condition={ isOutOfTime }>
+                                <Then>
+                                  <span className="settings__account-paid-until-label settings__account-paid-until-label--error">OUT OF TIME</span>
+                                </Then>
+                                <Else>
+                                  <span className="settings__account-paid-until-label">{ formattedPaidUntil }</span>
+                                </Else>
+                              </If>
                             </div>
                             <img className="settings__cell-disclosure" src="assets/images/icon-chevron.svg" />
                           </div>