aboutsummaryrefslogtreecommitdiffstats
path: root/mascara
diff options
context:
space:
mode:
authorJacky Chan <jchan@uber.com>2017-08-30 17:55:14 +0800
committerChi Kei Chan <chikeichan@gmail.com>2017-10-21 12:51:37 +0800
commita4ad88c331eb3e9f82cd54c1608e5e6bba201594 (patch)
tree9df238fed72e37b3677da9635312a773064fa41a /mascara
parent945cc5d18d8aac11eeb2ea746ddede5b83ff4046 (diff)
downloadtangerine-wallet-browser-a4ad88c331eb3e9f82cd54c1608e5e6bba201594.tar.gz
tangerine-wallet-browser-a4ad88c331eb3e9f82cd54c1608e5e6bba201594.tar.zst
tangerine-wallet-browser-a4ad88c331eb3e9f82cd54c1608e5e6bba201594.zip
Disable CTA unless notice is scrolled to bottom
Diffstat (limited to 'mascara')
-rw-r--r--mascara/src/app/first-time/index.js2
-rw-r--r--mascara/src/app/first-time/notice-screen.js31
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>