diff --git a/app/src/component/phoneNumberRewardSubcard/view.js b/app/src/component/phoneNumberRewardSubcard/view.js
index 3c3ac8b3..96f3a55a 100644
--- a/app/src/component/phoneNumberRewardSubcard/view.js
+++ b/app/src/component/phoneNumberRewardSubcard/view.js
@@ -11,14 +11,14 @@ import {
TouchableOpacity,
View
} from 'react-native';
-import Button from '../button';
-import Colors from '../../styles/colors';
-import Constants from '../../constants';
+import Button from 'component/button';
+import Colors from 'styles/colors';
+import Constants from 'constants';
import CountryPicker from 'react-native-country-picker-modal';
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 rewardStyle from '../../styles/reward';
+import rewardStyle from 'styles/reward';
class PhoneNumberRewardSubcard extends React.PureComponent {
phoneInput = null;
@@ -35,6 +35,7 @@ class PhoneNumberRewardSubcard extends React.PureComponent {
countryCode: null,
newPhoneAdded: false,
number: null,
+ phoneVerifyFailed: false,
verificationCode: null,
};
}
@@ -71,17 +72,18 @@ class PhoneNumberRewardSubcard extends React.PureComponent {
if (!phoneNewIsPending && (phoneNewIsPending !== prevProps.phoneNewIsPending)) {
if (phoneNewErrorMessage) {
notify({ message: String(phoneNewErrorMessage) });
+ this.setState({ phoneVerifyFailed: true });
} else {
- this.setState({ newPhoneAdded: true });
+ this.setState({ newPhoneAdded: true, phoneVerifyFailed: false });
}
}
if (!phoneVerifyIsPending && (phoneVerifyIsPending !== prevProps.phoneVerifyIsPending)) {
if (phoneVerifyErrorMessage) {
notify({ message: String(phoneVerifyErrorMessage) });
- this.setState({ codeVerifyStarted: false });
+ this.setState({ codeVerifyStarted: false, phoneVerifyFailed: true });
} else {
notify({ message: 'Your phone number was successfully verified.' });
- this.setState({ codeVerifySuccessful: true });
+ this.setState({ codeVerifySuccessful: true, phoneVerifyFailed: false });
if (onPhoneVerifySuccessful) {
onPhoneVerifySuccessful();
}
@@ -108,6 +110,7 @@ class PhoneNumberRewardSubcard extends React.PureComponent {
});
}
+ this.setState({ phoneVerifyFailed: false });
const countryCode = this.phoneInput.getCountryCode();
const number = this.phoneInput.getValue().replace('+' + countryCode, '');
this.setState({ countryCode, number });
@@ -120,7 +123,7 @@ class PhoneNumberRewardSubcard extends React.PureComponent {
}
const { verifyPhone } = this.props;
- this.setState({ codeVerifyStarted: true });
+ this.setState({ codeVerifyStarted: true, phoneVerifyFailed: false });
verifyPhone(this.state.verificationCode);
}
@@ -207,6 +210,12 @@ class PhoneNumberRewardSubcard extends React.PureComponent {
}
}
+ {this.state.phoneVerifyFailed &&
+
+
+ Sorry, we were unable to verify your phone number. Please go to for manual verification if this keeps happening.
+
+ }