From d1362f2ea3bf35a0aee5b3c0b13bb79a2cfcfe1c Mon Sep 17 00:00:00 2001
From: Akinwale Ariwodola <akinwale@gmail.com>
Date: Mon, 21 Jan 2019 18:53:01 +0100
Subject: [PATCH] show message for manual verification when phone verification
 fails

---
 .../phoneNumberRewardSubcard/view.js          | 27 ++++++++++++-------
 app/src/styles/reward.js                      |  3 +++
 2 files changed, 21 insertions(+), 9 deletions(-)

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 {
                 </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>
 
         <CountryPicker
diff --git a/app/src/styles/reward.js b/app/src/styles/reward.js
index b5dfd9b7..352af030 100644
--- a/app/src/styles/reward.js
+++ b/app/src/styles/reward.js
@@ -213,6 +213,9 @@ const rewardStyle = StyleSheet.create({
   redeemButton: {
     alignSelf: 'flex-end',
     backgroundColor: Colors.LbryGreen
+  },
+  failureFootnote: {
+    marginTop: 12
   }
 });