Skip to content
Permalink
Browse files

Merge pull request #193 from GoodDollar/166352432-redisign-sms

(Bug) Redisign sms send code again with loading and informative paragraph
  • Loading branch information...
kbardi committed Jun 12, 2019
2 parents 215f54b + 871bf2e commit 41f51a159d5f8e847877a3875166cfded3430160
Showing with 81 additions and 148 deletions.
  1. +1 −0 .travis.yml
  2. +63 −26 src/components/signup/SmsForm.web.js
  3. +17 −122 src/components/signup/__tests__/__snapshots__/SmsForm.web.js.snap
@@ -8,6 +8,7 @@ env:
global:
- REACT_ENV=development
- REACT_APP_LOG_LEVEL=debug
- BUNDLESIZE_GITHUB_TOKEN=63f6d1717c6652d63234cf9629977b08f4bac3fd
# - REACT_APP_NETWORK_ID=4447
- MNEMONIC="choice congress hobby buddy dutch busy army eager empty solution start grunt"
- CI=false
@@ -1,11 +1,12 @@
// @flow
import React from 'react'
import { Text, View } from 'react-native'
import { StyleSheet, Text, View } from 'react-native'
import OtpInput from 'react-otp-input'
import normalize from 'react-native-elements/src/helpers/normalizeText'
import logger from '../../lib/logger/pino-logger'
import API from '../../lib/API/api'
import { ActionButton, Error, Title, Wrapper } from './components'
import LoadingIndicator from '../common/LoadingIndicator'
import { ActionButton, Description, Error, Title, Wrapper } from './components'
import type { SignupState } from './SignupState'
const log = logger.child({ from: 'SmsForm.web' })

@@ -24,7 +25,9 @@ export type SMSRecord = {
type State = SMSRecord & {
valid?: boolean,
errorMessage: string,
sendingCode: boolean
sendingCode: boolean,
renderButton: boolean,
loading: boolean
}

export default class SmsForm extends React.Component<Props, State> {
@@ -33,22 +36,43 @@ export default class SmsForm extends React.Component<Props, State> {
sentSMS: false,
valid: false,
errorMessage: '',
sendingCode: false
sendingCode: false,
renderButton: false,
loading: false
}

numInputs: number = 6

componentDidMount() {}

componentDidUpdate() {
if (!this.state.renderButton) {
this.displayDelayedRenderButton()
}
}

displayDelayedRenderButton = () => {
setTimeout(() => {
this.setState({ renderButton: true })
}, 7000)
}

handleChange = async (otp: string) => {
if (otp.length === this.numInputs) {
this.setState({ loading: true })
try {
await this.verifyOTP(otp)
this.setState({ valid: true })
this.setState({
valid: true,
loading: false
})
this.handleSubmit()
} catch (e) {
log.error({ e })
this.setState({ errorMessage: e.response.data.message })
this.setState({
errorMessage: e.response.data.message,
loading: false
})
}
} else {
this.setState({ errorMessage: '' })
@@ -72,12 +96,11 @@ export default class SmsForm extends React.Component<Props, State> {
} catch (e) {
log.error(e)
}

this.setState({ sendingCode: false })
this.setState({ sendingCode: false, renderButton: false }, this.displayDelayedRenderButton)
}

render() {
const { valid, errorMessage, sendingCode } = this.state
const { valid, errorMessage, sendingCode, renderButton, loading } = this.state

return (
<Wrapper valid={valid} handleSubmit={this.handleSubmit} footerComponent={() => <React.Fragment />}>
@@ -95,16 +118,43 @@ export default class SmsForm extends React.Component<Props, State> {
errorStyle={errorStyle}
/>
<Error>{errorMessage !== '' && errorMessage}</Error>
<View style={buttonRow.wrapper}>
<ActionButton styles={buttonRow.button} loading={sendingCode} handleSubmit={this.handleRetry}>
<Text>Send me the code again</Text>
</ActionButton>
<View style={styles.buttonWrapper}>
{renderButton ? (
<ActionButton
styles={styles.button}
loading={sendingCode}
handleSubmit={this.handleRetry}
disabled={sendingCode}
>
<Text>Send me the code again</Text>
</ActionButton>
) : (
<Description>Please wait a few seconds until the SMS arrives</Description>
)}
</View>
<LoadingIndicator force={loading} />
</Wrapper>
)
}
}

const styles = StyleSheet.create({
informativeParagraph: {
margin: '1em'
},
buttonWrapper: {
alignContent: 'stretch',
flexDirection: 'column',
display: 'flex',
justifyContent: 'space-between'
},
button: {
justifyContent: 'center',
width: '100%',
height: normalize(60)
}
})

const inputStyle = {
width: '100%',
height: '3rem',
@@ -121,16 +171,3 @@ const errorStyle = {
borderBottom: '1px solid red',
color: 'red'
}

const buttonRow = {
wrapper: {
alignContent: 'center',
flexDirection: 'row',
justifyContent: 'space-between'
},
button: {
justifyContent: 'center',
width: '100%',
height: normalize(60)
}
}
@@ -308,142 +308,37 @@ exports[`SmsForm matches snapshot 1`] = `
className="css-view-1dbjc4n"
style={
Object {
"WebkitAlignContent": "center",
"WebkitAlignContent": "stretch",
"WebkitBoxDirection": "normal",
"WebkitBoxOrient": "horizontal",
"WebkitBoxOrient": "vertical",
"WebkitBoxPack": "justify",
"WebkitFlexDirection": "row",
"WebkitFlexDirection": "column",
"WebkitJustifyContent": "space-between",
"alignContent": "center",
"flexDirection": "row",
"alignContent": "stretch",
"display": "flex",
"flexDirection": "column",
"justifyContent": "space-between",
"msFlexDirection": "row",
"msFlexLinePack": "center",
"msFlexDirection": "column",
"msFlexLinePack": "stretch",
"msFlexPack": "justify",
}
}
>
<div
className="css-view-1dbjc4n"
className="css-text-76zvg2"
dir="auto"
style={
Object {
"WebkitBoxPack": "center",
"WebkitJustifyContent": "center",
"backgroundColor": "rgba(255,255,255,1.00)",
"borderBottomColor": "rgba(85,85,85,1.00)",
"borderBottomLeftRadius": "5px",
"borderBottomRightRadius": "5px",
"borderBottomStyle": "solid",
"borderBottomWidth": "1px",
"borderLeftColor": "rgba(85,85,85,1.00)",
"borderLeftStyle": "solid",
"borderLeftWidth": "1px",
"borderRightColor": "rgba(85,85,85,1.00)",
"borderRightStyle": "solid",
"borderRightWidth": "1px",
"borderTopColor": "rgba(85,85,85,1.00)",
"borderTopLeftRadius": "5px",
"borderTopRightRadius": "5px",
"borderTopStyle": "solid",
"borderTopWidth": "1px",
"boxShadow": "0px 0px 0px rgba(0,0,0,0.24)",
"height": "60px",
"justifyContent": "center",
"minWidth": "64px",
"msFlexPack": "center",
"width": "100%",
"color": "rgba(85,85,85,1.00)",
"direction": "ltr",
"fontFamily": "Roboto, \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
"fontSize": "18px",
"marginTop": "30px",
"textAlign": "center",
}
}
>
<div
className="css-cursor-18t94o4 css-view-1dbjc4n"
data-focusable={true}
disabled={false}
onKeyDown={[Function]}
onKeyPress={[Function]}
onKeyUp={[Function]}
onResponderGrant={[Function]}
onResponderMove={[Function]}
onResponderRelease={[Function]}
onResponderTerminate={[Function]}
onResponderTerminationRequest={[Function]}
onStartShouldSetResponder={[Function]}
role="button"
style={
Object {
"borderBottomLeftRadius": "4px",
"borderBottomRightRadius": "4px",
"borderTopLeftRadius": "4px",
"borderTopRightRadius": "4px",
"cursor": "pointer",
"msTouchAction": "manipulation",
"overflowX": "hidden",
"overflowY": "hidden",
"position": "relative",
"touchAction": "manipulation",
}
}
tabIndex="0"
>
<div
className="css-view-1dbjc4n"
style={
Object {
"WebkitAlignItems": "center",
"WebkitBoxAlign": "center",
"WebkitBoxDirection": "normal",
"WebkitBoxOrient": "horizontal",
"WebkitBoxPack": "center",
"WebkitFlexDirection": "row",
"WebkitJustifyContent": "center",
"alignItems": "center",
"flexDirection": "row",
"justifyContent": "center",
"msFlexAlign": "center",
"msFlexDirection": "row",
"msFlexPack": "center",
}
}
>
<div
className="css-text-76zvg2 css-textOneLine-bfa6kz"
dir="auto"
style={
Object {
"color": "rgba(85,85,85,1.00)",
"direction": "ltr",
"fontFamily": "Roboto-Medium, Roboto, \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
"letterSpacing": "1px",
"marginBottom": "9px",
"marginLeft": "16px",
"marginRight": "16px",
"marginTop": "9px",
"textAlign": "center",
}
}
>
<span
className="css-text-76zvg2 css-textHasAncestor-16my406"
dir="auto"
style={
Object {
"color": "rgba(85,85,85,1.00)",
"direction": "ltr",
"fontFamily": "Roboto, \\"Helvetica Neue\\", Helvetica, Arial, sans-serif",
"textAlign": "left",
}
}
>
<span
className="css-text-76zvg2 css-textHasAncestor-16my406"
dir="auto"
>
Send me the code again
</span>
</span>
</div>
</div>
</div>
Please wait a few seconds until the SMS arrives
</div>
</div>
</div>

0 comments on commit 41f51a1

Please sign in to comment.
You can’t perform that action at this time.