Add NoticeScreen

3 files changed, 104 insertions, 7 deletions

diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css
index 5193b412f..c10d4f9ce 100644
--- a/mascara/src/app/first-time/index.css
+++ b/mascara/src/app/first-time/index.css
@@ -7,15 +7,21 @@ $primary
 }
 
 .create-password,
-.unique-image {
+.unique-image,
+.tou {
   display: flex;
   flex-flow: column nowrap;
   margin: 67px 0 0 146px;
   max-width: 35rem;
 }
 
+.tou {
+  max-width: 46rem;
+}
+
 .create-password__title,
-.unique-image__title {
+.unique-image__title,
+.tou__title {
   width: 280px;
   color: #1B344D;
   font-size: 40px;
@@ -32,7 +38,8 @@ $primary
   margin-bottom: 54px;
 }
 
-.unique-image__title {
+.unique-image__title,
+.tou__title {
   margin-top: 24px;
 }
 
@@ -49,6 +56,21 @@ $primary
   margin-top: 24px;
 }
 
+.tou__body {
+  border: 1px solid #979797;
+  border-radius: 8px;
+  background-color: #FFFFFF;
+  margin: 0 142px 0 0;
+  height: 334px;
+  overflow-y: auto;
+  color: #757575;
+  font-family: Montserrat UltraLight;
+  font-size: 12px;
+  line-height: 15px;
+  text-align: justify;
+  padding: 22px 30px;
+}
+
 .first-time-flow__input {
   width: 350px;
   font-size: 18px;
diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index 4bc03c09c..a81c4c11d 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -2,6 +2,7 @@ import React, {Component, PropTypes} from 'react'
 import {connect} from 'react-redux';
 import CreatePasswordScreen from './create-password-screen'
 import UniqueImageScreen from './unique-image-screen'
+import NoticeScreen from './notice-screen'
 
 class FirstTimeFlow extends Component {
 
@@ -20,7 +21,7 @@ class FirstTimeFlow extends Component {
   static SCREEN_TYPE = {
     CREATE_PASSWORD: 'create_password',
     UNIQUE_IMAGE: 'unique_image',
-    TERM_OF_USE: 'term_of_use',
+    NOTICE: 'notice',
     BACK_UP_PHRASE: 'back_up_phrase',
     CONFIRM_BACK_UP_PHRASE: 'confirm_back_up_phrase',
     BUY_ETHER: 'buy_ether'
@@ -41,14 +42,14 @@ class FirstTimeFlow extends Component {
     const {isInitialized, seedWords, noActiveNotices} = this.props;
     const {SCREEN_TYPE} = FirstTimeFlow
 
-    return SCREEN_TYPE.UNIQUE_IMAGE
+    // return SCREEN_TYPE.UNIQUE_IMAGE
 
     if (!isInitialized) {
       return SCREEN_TYPE.CREATE_PASSWORD
     }
 
     if (!noActiveNotices) {
-      return SCREEN_TYPE.TERM_OF_USE
+      return SCREEN_TYPE.NOTICE
     }
 
     if (seedWords) {
@@ -69,7 +70,13 @@ class FirstTimeFlow extends Component {
       case SCREEN_TYPE.UNIQUE_IMAGE:
         return (
           <UniqueImageScreen
-            next={() => this.setScreenType(SCREEN_TYPE.TERM_OF_USE)}
+            next={() => this.setScreenType(SCREEN_TYPE.NOTICE)}
+          />
+        )
+      case SCREEN_TYPE.NOTICE:
+        return (
+          <NoticeScreen
+            next={() => this.setScreenType(SCREEN_TYPE.BACK_UP_PHRASE)}
           />
         )
       default:
diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js
new file mode 100644
index 000000000..d6502a6b2
--- /dev/null
+++ b/mascara/src/app/first-time/notice-screen.js
@@ -0,0 +1,68 @@
+import React, {Component, PropTypes} from 'react'
+import Markdown from 'react-markdown'
+import {connect} from 'react-redux';
+import {markNoticeRead} from '../../../../ui/app/actions'
+import Identicon from '../../../../ui/app/components/identicon'
+import Breadcrumbs from './breadcrumbs'
+
+class NoticeScreen extends Component {
+  static propTypes = {
+    address: PropTypes.string.isRequired,
+    lastUnreadNotice: PropTypes.shape({
+      title: PropTypes.string,
+      date: PropTypes.string,
+      body: PropTypes.string
+    }),
+    next: PropTypes.func.isRequired
+  };
+
+  static defaultProps = {
+    lastUnreadNotice: {}
+  };
+
+  acceptTerms = () => {
+    const { markNoticeRead, lastUnreadNotice, next } = this.props;
+    const defer = markNoticeRead(lastUnreadNotice)
+
+    if ((/terms/gi).test(lastUnreadNotice.title)) {
+      defer.then(next)
+    }
+  }
+
+  render() {
+    const {
+      address,
+      lastUnreadNotice: { title, body }
+    } = this.props;
+
+    return (
+      <div className="tou">
+        <Identicon address={address} diameter={70} />
+        <div className="tou__title">{title}</div>
+        <Markdown
+          className="tou__body"
+          source={body}
+          skipHtml
+        />
+        <button
+          className="first-time-flow__button"
+          onClick={this.acceptTerms}
+        >
+          Accept
+        </button>
+        <Breadcrumbs total={3} currentIndex={2} />
+      </div>
+    )
+  }
+}
+
+export default connect(
+  ({ metamask: { identities, lastUnreadNotice } }) => ({
+    lastUnreadNotice,
+    address: Object.entries(identities)
+      .map(([key]) => key)[0]
+  }),
+  dispatch => ({
+    markNoticeRead: notice => dispatch(markNoticeRead(notice))
+  })
+)(NoticeScreen)