Disable CTA unless notice is scrolled to bottom

2 files changed, 29 insertions, 4 deletions

diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js
index 90f89f380..42c89aa0d 100644
--- a/mascara/src/app/first-time/index.js
+++ b/mascara/src/app/first-time/index.js
@@ -52,7 +52,7 @@ class FirstTimeFlow extends Component {
     } = this.props;
     const {SCREEN_TYPE} = FirstTimeFlow
 
-    // return SCREEN_TYPE.BACK_UP_PHRASE
+    // return SCREEN_TYPE.NOTICE
 
     if (!isInitialized) {
       return SCREEN_TYPE.CREATE_PASSWORD
diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js
index 8c9a0cd41..713f3f242 100644
--- a/mascara/src/app/first-time/notice-screen.js
+++ b/mascara/src/app/first-time/notice-screen.js
@@ -1,6 +1,7 @@
 import React, {Component, PropTypes} from 'react'
 import Markdown from 'react-markdown'
-import {connect} from 'react-redux';
+import {connect} from 'react-redux'
+import debounce from 'lodash.debounce'
 import {markNoticeRead} from '../../../../ui/app/actions'
 import Identicon from '../../../../ui/app/components/identicon'
 import Breadcrumbs from './breadcrumbs'
@@ -20,23 +21,46 @@ class NoticeScreen extends Component {
     lastUnreadNotice: {}
   };
 
+  state = {
+    atBottom: false,
+  }
+
+  componentDidMount() {
+    this.onScroll()
+  }
+
   acceptTerms = () => {
     const { markNoticeRead, lastUnreadNotice, next } = this.props;
     const defer = markNoticeRead(lastUnreadNotice)
+      .then(() => this.setState({ atBottom: false }))
 
     if ((/terms/gi).test(lastUnreadNotice.title)) {
       defer.then(next)
     }
   }
 
+  onScroll = debounce(() => {
+    if (this.state.atBottom) return
+
+    const target = document.querySelector('.tou__body')
+    const {scrollTop, offsetHeight, scrollHeight} = target;
+    const atBottom = scrollTop + offsetHeight >= scrollHeight;
+
+    this.setState({atBottom: atBottom})
+  }, 25)
+
   render() {
     const {
       address,
       lastUnreadNotice: { title, body }
     } = this.props;
+    const { atBottom } = this.state
 
     return (
-      <div className="tou">
+      <div
+        className="tou"
+        onScroll={this.onScroll}
+      >
         <Identicon address={address} diameter={70} />
         <div className="tou__title">{title}</div>
         <Markdown
@@ -46,7 +70,8 @@ class NoticeScreen extends Component {
         />
         <button
           className="first-time-flow__button"
-          onClick={this.acceptTerms}
+          onClick={atBottom && this.acceptTerms}
+          disabled={!atBottom}
         >
           Accept
         </button>