Merge pull request #409 from lbryio/phone-verification-fail
show message for manual verification when phone verification fails
This commit is contained in:
commit
eaaa2b97b4
2 changed files with 21 additions and 9 deletions
|
@ -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
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue