From 8024accd32811d45f2220c79f274d547e0c4c773 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Thu, 15 Apr 2021 17:22:22 -0400
Subject: cleaned up Verification to be PasswordVerification

---
 src/routes/onboarding/OnboardingStackNavigator.tsx |   3 +-
 src/routes/onboarding/OnboardingStackScreen.tsx    |   6 +-
 .../onboarding/InvitationCodeVerification.tsx      |  13 +-
 src/screens/onboarding/PasswordResetRequest.tsx    |   3 +-
 src/screens/onboarding/PasswordVerification.tsx    | 220 ++++++++++++++++
 src/screens/onboarding/Verification.tsx            | 281 ---------------------
 src/screens/onboarding/index.ts                    |   2 +-
 src/types/types.ts                                 |   8 -
 8 files changed, 227 insertions(+), 309 deletions(-)
 create mode 100644 src/screens/onboarding/PasswordVerification.tsx
 delete mode 100644 src/screens/onboarding/Verification.tsx

diff --git a/src/routes/onboarding/OnboardingStackNavigator.tsx b/src/routes/onboarding/OnboardingStackNavigator.tsx
index 7d8a751a..4726a47d 100644
--- a/src/routes/onboarding/OnboardingStackNavigator.tsx
+++ b/src/routes/onboarding/OnboardingStackNavigator.tsx
@@ -1,5 +1,4 @@
 import {createStackNavigator} from '@react-navigation/stack';
-import {VerificationScreenType} from '../../types';
 
 export type OnboardingStackParams = {
   InvitationCodeVerification: {userId: string; username: string};
@@ -9,8 +8,8 @@ export type OnboardingStackParams = {
   OnboardingStepTwo: {firstName: string; lastName: string; phone: string};
   PasswordReset: {value: string};
   PasswordResetRequest: undefined;
+  PasswordVerification: {id: string};
   PhoneVerification: {firstName: string; lastName: string; phone: string};
-  Verification: {id: string; screenType: VerificationScreenType};
   WelcomeScreen: undefined;
 };
 
diff --git a/src/routes/onboarding/OnboardingStackScreen.tsx b/src/routes/onboarding/OnboardingStackScreen.tsx
index 5e1de2dd..339c3d0d 100644
--- a/src/routes/onboarding/OnboardingStackScreen.tsx
+++ b/src/routes/onboarding/OnboardingStackScreen.tsx
@@ -7,8 +7,8 @@ import {
   OnboardingStepTwo,
   PasswordReset,
   PasswordResetRequest,
+  PasswordVerification,
   PhoneVerification,
-  Verification,
   WelcomeScreen,
 } from '../../screens';
 import OnboardingStepOne from '../../screens/onboarding/OnboardingStepOne';
@@ -52,8 +52,8 @@ const Onboarding: React.FC = () => {
         }}
       />
       <OnboardingStack.Screen
-        name="Verification"
-        component={Verification}
+        name="PasswordVerification"
+        component={PasswordVerification}
         options={{
           ...modalStyle,
         }}
diff --git a/src/screens/onboarding/InvitationCodeVerification.tsx b/src/screens/onboarding/InvitationCodeVerification.tsx
index 6bc0ac9d..d84b2ba2 100644
--- a/src/screens/onboarding/InvitationCodeVerification.tsx
+++ b/src/screens/onboarding/InvitationCodeVerification.tsx
@@ -1,7 +1,7 @@
 import AsyncStorage from '@react-native-community/async-storage';
 import {RouteProp} from '@react-navigation/native';
 import {StackNavigationProp} from '@react-navigation/stack';
-import React, {useContext} from 'react';
+import React from 'react';
 import {Alert, KeyboardAvoidingView, StyleSheet, View} from 'react-native';
 import {Text} from 'react-native-animatable';
 import {
@@ -27,7 +27,6 @@ import {
 import {OnboardingStackParams} from '../../routes';
 import {BackgroundGradientType} from '../../types';
 import {SCREEN_WIDTH, userLogin} from '../../utils';
-import {ChatContext} from '../../App';
 
 type InvitationCodeVerificationRouteProp = RouteProp<
   OnboardingStackParams,
@@ -59,7 +58,6 @@ const InvitationCodeVerification: React.FC<InvitationCodeVerificationProps> = ({
     setValue,
   });
   const dispatch = useDispatch();
-  const {chatClient} = useContext(ChatContext);
 
   const handleInvitationCodeVerification = async () => {
     if (value.length === 6) {
@@ -200,10 +198,6 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-around',
   },
-  noInviteCode: {
-    flexDirection: 'row',
-    justifyContent: 'center',
-  },
   youveBeenAddedLabel: {
     marginVertical: '5%',
     width: SCREEN_WIDTH * 0.8,
@@ -213,11 +207,6 @@ const styles = StyleSheet.create({
     fontWeight: '500',
     marginBottom: '10%',
   },
-  inviteCodeLink: {
-    color: 'white',
-    fontSize: 18,
-    textDecorationLine: 'underline',
-  },
 });
 
 export default InvitationCodeVerification;
diff --git a/src/screens/onboarding/PasswordResetRequest.tsx b/src/screens/onboarding/PasswordResetRequest.tsx
index a63eae81..8a891bbb 100644
--- a/src/screens/onboarding/PasswordResetRequest.tsx
+++ b/src/screens/onboarding/PasswordResetRequest.tsx
@@ -74,9 +74,8 @@ const PasswordResetRequest: React.FC<PasswordResetRequestProps> = ({
           handlePasswordResetRequest(form.value),
         );
         if (success) {
-          navigation.navigate('Verification', {
+          navigation.navigate('PasswordVerification', {
             id: form.value,
-            screenType: VerificationScreenType.Password,
           });
         }
       } else {
diff --git a/src/screens/onboarding/PasswordVerification.tsx b/src/screens/onboarding/PasswordVerification.tsx
new file mode 100644
index 00000000..6bda37a7
--- /dev/null
+++ b/src/screens/onboarding/PasswordVerification.tsx
@@ -0,0 +1,220 @@
+import {RouteProp} from '@react-navigation/native';
+import {StackNavigationProp} from '@react-navigation/stack';
+import React from 'react';
+import {
+  Alert,
+  KeyboardAvoidingView,
+  Platform,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import {Text} from 'react-native-animatable';
+import {
+  CodeField,
+  Cursor,
+  useBlurOnFulfill,
+  useClearByFocusCell,
+} from 'react-native-confirmation-code-field';
+import {trackPromise} from 'react-promise-tracker';
+import {
+  ArrowButton,
+  Background,
+  LoadingIndicator,
+  SubmitButton,
+} from '../../components';
+import {codeRegex} from '../../constants';
+import {
+  ERROR_INVALID_VERIFICATION_CODE_FORMAT,
+  ERROR_SOMETHING_WENT_WRONG,
+} from '../../constants/strings';
+import {OnboardingStackParams} from '../../routes';
+import {
+  handlePasswordCodeVerification,
+  handlePasswordResetRequest,
+} from '../../services';
+import {BackgroundGradientType} from '../../types';
+
+type VerificationScreenRouteProp = RouteProp<
+  OnboardingStackParams,
+  'PasswordVerification'
+>;
+type VerificationScreenNavigationProp = StackNavigationProp<
+  OnboardingStackParams,
+  'PasswordVerification'
+>;
+interface VerificationProps {
+  route: VerificationScreenRouteProp;
+  navigation: VerificationScreenNavigationProp;
+}
+
+const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
+  const [value, setValue] = React.useState('');
+  const ref = useBlurOnFulfill({value, cellCount: 6});
+  const [valueProps, getCellOnLayoutHandler] = useClearByFocusCell({
+    value,
+    setValue,
+  });
+  const {id} = route.params;
+
+  const handleVerification = async () => {
+    if (codeRegex.test(value)) {
+      try {
+        const success = await trackPromise(
+          handlePasswordCodeVerification(id, value),
+        );
+        if (success) {
+          navigation.navigate('PasswordReset', {value: id});
+        }
+      } catch (error) {
+        console.log(error);
+        Alert.alert(ERROR_SOMETHING_WENT_WRONG);
+      }
+    } else {
+      Alert.alert(ERROR_INVALID_VERIFICATION_CODE_FORMAT);
+    }
+  };
+
+  /**
+   * Sends the send_otp request so to provide a new verification code upon tapping the Resend Code button.
+   */
+  const handleResend = async () => {
+    try {
+      trackPromise(handlePasswordResetRequest(id));
+    } catch (error) {
+      console.log(error);
+      Alert.alert(ERROR_SOMETHING_WENT_WRONG);
+    }
+  };
+
+  const Footer = () => (
+    <View style={styles.footer}>
+      <ArrowButton
+        direction="backward"
+        onPress={() => navigation.navigate('PasswordResetRequest')}
+      />
+    </View>
+  );
+
+  return (
+    <Background
+      centered
+      style={styles.container}
+      gradientType={BackgroundGradientType.Light}>
+      <KeyboardAvoidingView
+        behavior="padding"
+        style={styles.formPasswordVerification}>
+        <Text style={styles.formHeader}>Enter 6 digit code</Text>
+        <Text style={styles.description}>
+          We sent a 6 digit verification code to the phone number you provided.
+        </Text>
+        <CodeField
+          ref={ref}
+          {...valueProps}
+          value={value}
+          onChangeText={setValue}
+          cellCount={6}
+          rootStyle={styles.codeFieldRoot}
+          keyboardType="number-pad"
+          textContentType="oneTimeCode"
+          renderCell={({index, symbol, isFocused}) => (
+            <View
+              onLayout={getCellOnLayoutHandler(index)}
+              key={index}
+              style={[styles.cellRoot, isFocused && styles.focusCell]}>
+              <Text style={styles.cellText}>
+                {symbol || (isFocused ? <Cursor /> : null)}
+              </Text>
+            </View>
+          )}
+        />
+        <SubmitButton
+          text="Verify"
+          color="#fff"
+          style={styles.button}
+          accessibilityLabel="Verify"
+          accessibilityHint="Select this after entering your phone number verification code"
+          onPress={handleVerification}
+        />
+        <TouchableOpacity onPress={handleResend}>
+          <Text style={styles.resend}>Resend Code</Text>
+        </TouchableOpacity>
+        <LoadingIndicator />
+      </KeyboardAvoidingView>
+      <Footer />
+    </Background>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  formPasswordVerification: {
+    alignItems: 'center',
+    justifyContent: 'flex-start',
+    flex: 3,
+    top: '25%',
+  },
+  formHeader: {
+    color: '#fff',
+    fontSize: 20,
+    fontWeight: 'bold',
+    alignSelf: 'flex-start',
+    marginBottom: '6%',
+    marginHorizontal: '10%',
+  },
+  description: {
+    color: '#fff',
+    fontWeight: '600',
+    fontSize: 17,
+    marginHorizontal: '10%',
+  },
+  resend: {
+    textDecorationLine: 'underline',
+    color: '#fff',
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  codeFieldRoot: {
+    width: 280,
+    marginHorizontal: 'auto',
+    marginVertical: '15%',
+  },
+  cellRoot: {
+    width: 40,
+    height: 60,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderBottomColor: '#fff',
+    borderBottomWidth: 1,
+  },
+  cellText: {
+    color: '#fff',
+    fontSize: 48,
+    textAlign: 'center',
+  },
+  focusCell: {
+    borderBottomColor: '#78a0ef',
+    borderBottomWidth: 2,
+  },
+  button: {
+    marginVertical: '5%',
+  },
+  footer: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-around',
+    ...Platform.select({
+      ios: {
+        bottom: '20%',
+      },
+      android: {
+        bottom: '10%',
+      },
+    }),
+  },
+});
+export default Verification;
diff --git a/src/screens/onboarding/Verification.tsx b/src/screens/onboarding/Verification.tsx
deleted file mode 100644
index dda18364..00000000
--- a/src/screens/onboarding/Verification.tsx
+++ /dev/null
@@ -1,281 +0,0 @@
-import {RouteProp} from '@react-navigation/native';
-import {StackNavigationProp} from '@react-navigation/stack';
-import React from 'react';
-import {
-  Alert,
-  KeyboardAvoidingView,
-  Platform,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from 'react-native';
-import {Text} from 'react-native-animatable';
-import {
-  CodeField,
-  Cursor,
-  useBlurOnFulfill,
-  useClearByFocusCell,
-} from 'react-native-confirmation-code-field';
-import {trackPromise} from 'react-promise-tracker';
-import {
-  ArrowButton,
-  Background,
-  LoadingIndicator,
-  RegistrationWizard,
-  SubmitButton,
-} from '../../components';
-import {codeRegex} from '../../constants';
-import {
-  ERROR_INVALID_VERIFICATION_CODE_FORMAT,
-  ERROR_SOMETHING_WENT_WRONG,
-} from '../../constants/strings';
-import {OnboardingStackParams} from '../../routes';
-import {
-  handlePasswordCodeVerification,
-  handlePasswordResetRequest,
-  sendOtp,
-  verifyOtp,
-} from '../../services';
-import {BackgroundGradientType, VerificationScreenType} from '../../types';
-
-type VerificationScreenRouteProp = RouteProp<
-  OnboardingStackParams,
-  'Verification'
->;
-type VerificationScreenNavigationProp = StackNavigationProp<
-  OnboardingStackParams,
-  'Verification'
->;
-interface VerificationProps {
-  route: VerificationScreenRouteProp;
-  navigation: VerificationScreenNavigationProp;
-}
-
-const Verification: React.FC<VerificationProps> = ({route, navigation}) => {
-  const [value, setValue] = React.useState('');
-  const ref = useBlurOnFulfill({value, cellCount: 6});
-  const [valueProps, getCellOnLayoutHandler] = useClearByFocusCell({
-    value,
-    setValue,
-  });
-  const {id, screenType} = route.params;
-  const isPhoneVerification = screenType === VerificationScreenType.Phone;
-
-  const handlePhoneVerification = async () => {
-    const success = await trackPromise(verifyOtp(id, value));
-    if (success) {
-      navigation.navigate('RegistrationTwo', {phone: id});
-    }
-  };
-
-  const handlePasswordVerification = async () => {
-    const success = await trackPromise(
-      handlePasswordCodeVerification(id, value),
-    );
-    if (success) {
-      navigation.navigate('PasswordReset', {value: id});
-    }
-  };
-
-  /**
-   * Sends the verify_otp request upon tapping the Verify button.
-   * If successful, it navigates to the respected page.
-   */
-  const handleVerification = async () => {
-    if (codeRegex.test(value)) {
-      try {
-        switch (screenType) {
-          case VerificationScreenType.Phone:
-            handlePhoneVerification();
-            break;
-          case VerificationScreenType.Password:
-            handlePasswordVerification();
-            break;
-        }
-      } catch (error) {
-        console.log(error);
-        Alert.alert(ERROR_SOMETHING_WENT_WRONG);
-      }
-    } else {
-      Alert.alert(ERROR_INVALID_VERIFICATION_CODE_FORMAT);
-    }
-  };
-
-  /**
-   * Sends the send_otp request so to provide a new verification code upon tapping the Resend Code button.
-   */
-  const handleResend = async () => {
-    try {
-      switch (screenType) {
-        case VerificationScreenType.Phone:
-          trackPromise(sendOtp(id));
-          break;
-        case VerificationScreenType.Password:
-          trackPromise(handlePasswordResetRequest(id));
-          break;
-      }
-    } catch (error) {
-      console.log(error);
-      Alert.alert(ERROR_SOMETHING_WENT_WRONG);
-    }
-  };
-
-  const handleGoBack = () => {
-    switch (screenType) {
-      case VerificationScreenType.Phone:
-        navigation.navigate('RegistrationOne');
-        break;
-      case VerificationScreenType.Password:
-        navigation.navigate('PasswordResetRequest');
-        break;
-    }
-  };
-
-  const Footer = () => (
-    <View style={styles.footer}>
-      <ArrowButton direction="backward" onPress={() => handleGoBack()} />
-    </View>
-  );
-
-  return (
-    <Background
-      centered
-      style={styles.container}
-      gradientType={BackgroundGradientType.Light}>
-      {isPhoneVerification ? (
-        <RegistrationWizard style={styles.wizard} step="three" />
-      ) : (
-        <React.Fragment />
-      )}
-      <KeyboardAvoidingView
-        behavior="padding"
-        style={
-          isPhoneVerification ? styles.form : styles.formPasswordVerification
-        }>
-        <Text style={styles.formHeader}>Enter 6 digit code</Text>
-        <Text style={styles.description}>
-          We sent a 6 digit verification code to the phone number you provided.
-        </Text>
-        <CodeField
-          ref={ref}
-          {...valueProps}
-          value={value}
-          onChangeText={setValue}
-          cellCount={6}
-          rootStyle={styles.codeFieldRoot}
-          keyboardType="number-pad"
-          textContentType="oneTimeCode"
-          renderCell={({index, symbol, isFocused}) => (
-            <View
-              onLayout={getCellOnLayoutHandler(index)}
-              key={index}
-              style={[styles.cellRoot, isFocused && styles.focusCell]}>
-              <Text style={styles.cellText}>
-                {symbol || (isFocused ? <Cursor /> : null)}
-              </Text>
-            </View>
-          )}
-        />
-        <SubmitButton
-          text="Verify"
-          color="#fff"
-          style={styles.button}
-          accessibilityLabel="Verify"
-          accessibilityHint="Select this after entering your phone number verification code"
-          onPress={handleVerification}
-        />
-        <TouchableOpacity onPress={handleResend}>
-          <Text style={styles.resend}>Resend Code</Text>
-        </TouchableOpacity>
-        <LoadingIndicator />
-      </KeyboardAvoidingView>
-      <Footer />
-    </Background>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  wizard: {
-    marginTop: '3.5%',
-    flex: 1,
-    justifyContent: 'center',
-  },
-  form: {
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    flex: 3,
-  },
-  formPasswordVerification: {
-    alignItems: 'center',
-    justifyContent: 'flex-start',
-    flex: 3,
-    top: '25%',
-  },
-  formHeader: {
-    color: '#fff',
-    fontSize: 20,
-    fontWeight: 'bold',
-    alignSelf: 'flex-start',
-    marginBottom: '6%',
-    marginHorizontal: '10%',
-  },
-  description: {
-    color: '#fff',
-    fontWeight: '600',
-    fontSize: 17,
-    marginHorizontal: '10%',
-  },
-  resend: {
-    textDecorationLine: 'underline',
-    color: '#fff',
-    fontSize: 15,
-    fontWeight: '600',
-  },
-  codeFieldRoot: {
-    width: 280,
-    marginHorizontal: 'auto',
-    marginVertical: '15%',
-  },
-  cellRoot: {
-    width: 40,
-    height: 60,
-    justifyContent: 'center',
-    alignItems: 'center',
-    borderBottomColor: '#fff',
-    borderBottomWidth: 1,
-  },
-  cellText: {
-    color: '#fff',
-    fontSize: 48,
-    textAlign: 'center',
-  },
-  focusCell: {
-    borderBottomColor: '#78a0ef',
-    borderBottomWidth: 2,
-  },
-  button: {
-    marginVertical: '5%',
-  },
-  loadingIndicator: {
-    marginVertical: '5%',
-  },
-  footer: {
-    width: '100%',
-    flexDirection: 'row',
-    justifyContent: 'space-around',
-    ...Platform.select({
-      ios: {
-        bottom: '20%',
-      },
-      android: {
-        bottom: '10%',
-      },
-    }),
-  },
-});
-export default Verification;
diff --git a/src/screens/onboarding/index.ts b/src/screens/onboarding/index.ts
index bce03bf8..7eb0587f 100644
--- a/src/screens/onboarding/index.ts
+++ b/src/screens/onboarding/index.ts
@@ -6,5 +6,5 @@ export {default as OnboardingStepTwo} from './OnboardingStepTwo';
 export {default as PasswordReset} from './PasswordReset';
 export {default as PasswordResetRequest} from './PasswordResetRequest';
 export {default as PhoneVerification} from './PhoneVerification';
-export {default as Verification} from './Verification';
+export {default as PasswordVerification} from './PasswordVerification';
 export {default as WelcomeScreen} from './WelcomeScreen';
diff --git a/src/types/types.ts b/src/types/types.ts
index 72fd7d04..c674866f 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -164,14 +164,6 @@ export interface UserXType {
   cover: string | undefined;
 }
 
-/**
- * We have two verification screen types, this enum is used to display proper content based on the type
- */
-export enum VerificationScreenType {
-  Phone,
-  Password,
-}
-
 /**
  * Gradient type to accomodate new g background gradients for Tagg
  */
-- 
cgit v1.2.3-70-g09d2