show message for manual verification when phone verification fails

This commit is contained in:
Akinwale Ariwodola 2019-01-21 18:53:01 +01:00
parent 2c56c78467
commit d1362f2ea3
2 changed files with 21 additions and 9 deletions

View file

@ -11,14 +11,14 @@ import {
TouchableOpacity, TouchableOpacity,
View View
} from 'react-native'; } from 'react-native';
import Button from '../button'; import Button from 'component/button';
import Colors from '../../styles/colors'; import Colors from 'styles/colors';
import Constants from '../../constants'; import Constants from 'constants';
import CountryPicker from 'react-native-country-picker-modal'; import CountryPicker from 'react-native-country-picker-modal';
import Icon from 'react-native-vector-icons/FontAwesome5'; import Icon from 'react-native-vector-icons/FontAwesome5';
import Link from '../link'; import Link from 'component/link';
import PhoneInput from 'react-native-phone-input'; import PhoneInput from 'react-native-phone-input';
import rewardStyle from '../../styles/reward'; import rewardStyle from 'styles/reward';
class PhoneNumberRewardSubcard extends React.PureComponent { class PhoneNumberRewardSubcard extends React.PureComponent {
phoneInput = null; phoneInput = null;
@ -35,6 +35,7 @@ class PhoneNumberRewardSubcard extends React.PureComponent {
countryCode: null, countryCode: null,
newPhoneAdded: false, newPhoneAdded: false,
number: null, number: null,
phoneVerifyFailed: false,
verificationCode: null, verificationCode: null,
}; };
} }
@ -71,17 +72,18 @@ class PhoneNumberRewardSubcard extends React.PureComponent {
if (!phoneNewIsPending && (phoneNewIsPending !== prevProps.phoneNewIsPending)) { if (!phoneNewIsPending && (phoneNewIsPending !== prevProps.phoneNewIsPending)) {
if (phoneNewErrorMessage) { if (phoneNewErrorMessage) {
notify({ message: String(phoneNewErrorMessage) }); notify({ message: String(phoneNewErrorMessage) });
this.setState({ phoneVerifyFailed: true });
} else { } else {
this.setState({ newPhoneAdded: true }); this.setState({ newPhoneAdded: true, phoneVerifyFailed: false });
} }
} }
if (!phoneVerifyIsPending && (phoneVerifyIsPending !== prevProps.phoneVerifyIsPending)) { if (!phoneVerifyIsPending && (phoneVerifyIsPending !== prevProps.phoneVerifyIsPending)) {
if (phoneVerifyErrorMessage) { if (phoneVerifyErrorMessage) {
notify({ message: String(phoneVerifyErrorMessage) }); notify({ message: String(phoneVerifyErrorMessage) });
this.setState({ codeVerifyStarted: false }); this.setState({ codeVerifyStarted: false, phoneVerifyFailed: true });
} else { } else {
notify({ message: 'Your phone number was successfully verified.' }); notify({ message: 'Your phone number was successfully verified.' });
this.setState({ codeVerifySuccessful: true }); this.setState({ codeVerifySuccessful: true, phoneVerifyFailed: false });
if (onPhoneVerifySuccessful) { if (onPhoneVerifySuccessful) {
onPhoneVerifySuccessful(); onPhoneVerifySuccessful();
} }
@ -108,6 +110,7 @@ class PhoneNumberRewardSubcard extends React.PureComponent {
}); });
} }
this.setState({ phoneVerifyFailed: false });
const countryCode = this.phoneInput.getCountryCode(); const countryCode = this.phoneInput.getCountryCode();
const number = this.phoneInput.getValue().replace('+' + countryCode, ''); const number = this.phoneInput.getValue().replace('+' + countryCode, '');
this.setState({ countryCode, number }); this.setState({ countryCode, number });
@ -120,7 +123,7 @@ class PhoneNumberRewardSubcard extends React.PureComponent {
} }
const { verifyPhone } = this.props; const { verifyPhone } = this.props;
this.setState({ codeVerifyStarted: true }); this.setState({ codeVerifyStarted: true, phoneVerifyFailed: false });
verifyPhone(this.state.verificationCode); verifyPhone(this.state.verificationCode);
} }
@ -207,6 +210,12 @@ class PhoneNumberRewardSubcard extends React.PureComponent {
</View>} </View>}
</View> </View>
} }
{this.state.phoneVerifyFailed &&
<View style={rewardStyle.failureFootnote}>
<Text style={rewardStyle.subcardText}>
Sorry, we were unable to verify your phone number. Please go to <Link style={rewardStyle.textLink} href="http://chat.lbry.io" text="chat.lbry.io" /> for manual verification if this keeps happening.
</Text>
</View>}
</View> </View>
<CountryPicker <CountryPicker

View file

@ -213,6 +213,9 @@ const rewardStyle = StyleSheet.create({
redeemButton: { redeemButton: {
alignSelf: 'flex-end', alignSelf: 'flex-end',
backgroundColor: Colors.LbryGreen backgroundColor: Colors.LbryGreen
},
failureFootnote: {
marginTop: 12
} }
}); });