reverted legacy onboarding

2 files changed, 90 insertions, 90 deletions

diff --git a/src/screens/onboarding/legacy/OnboardingStepOne.tsx b/src/screens/onboarding/legacy/OnboardingStepOne.tsx
index 5e88d004..b25d41fd 100644
--- a/src/screens/onboarding/legacy/OnboardingStepOne.tsx
+++ b/src/screens/onboarding/legacy/OnboardingStepOne.tsx
@@ -13,21 +13,19 @@ import {
 import {
   ArrowButton,
   Background,
-  BasicButton,
-  // RegistrationWizard,
+  RegistrationWizard,
   TaggInput,
-  TaggSquareButton,
-} from '../../components';
-import {nameRegex, phoneRegex} from '../../constants';
+} from '../../../components';
+import {nameRegex, phoneRegex} from '../../../constants';
 import {
   ERROR_NEXT_PAGE,
   ERROR_PHONE_IN_USE,
   ERROR_TWILIO_SERVER_ERROR,
-} from '../../constants/strings';
-import {OnboardingStackParams} from '../../routes';
-import {sendOtpStatusCode} from '../../services';
-import {BackgroundGradientType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+} from '../../../constants/strings';
+import {OnboardingStackParams} from '../../../routes';
+import {sendOtpStatusCode} from '../../../services';
+import {BackgroundGradientType} from '../../../types';
+import {SCREEN_HEIGHT} from '../../../utils';
 
 type OnboardingStepOneNavigationProp = StackNavigationProp<
   OnboardingStackParams,
@@ -110,26 +108,27 @@ const OnboardingStepOne: React.FC<OnboardingStepOneProps> = ({navigation}) => {
       });
     }
     try {
-      const {isValidFname} = form;
-      // const {isValidFname, isValidLname, isValidPhone} = form;
-      if (isValidFname) {
-        const {fname} = form;
-        navigation.navigate('OnboardingStepTwo', {
-          firstName: fname,
-        });
-        // const {phone} = form;
-        // const code = await sendOtpStatusCode(phone);
-        // if (code) {
-        //   switch (code) {
-        //     case 200:
-        //       const {fname, lname} = form;
-
-        //   break;
-        // case 409:
-        //   Alert.alert(ERROR_PHONE_IN_USE);
-        //   break;
-        // default:
-        //   Alert.alert(ERROR_TWILIO_SERVER_ERROR);
+      const {isValidFname, isValidLname, isValidPhone} = form;
+      if (isValidFname && isValidLname && isValidPhone) {
+        const {phone} = form;
+        const code = await sendOtpStatusCode(phone);
+        if (code) {
+          switch (code) {
+            case 200:
+              const {fname, lname} = form;
+              navigation.navigate('PhoneVerification', {
+                firstName: fname,
+                lastName: lname,
+                phone,
+              });
+              break;
+            case 409:
+              Alert.alert(ERROR_PHONE_IN_USE);
+              break;
+            default:
+              Alert.alert(ERROR_TWILIO_SERVER_ERROR);
+          }
+        }
       } else {
         setForm({...form, attemptedSubmit: false});
         setTimeout(() => setForm({...form, attemptedSubmit: true}));
@@ -145,36 +144,29 @@ const OnboardingStepOne: React.FC<OnboardingStepOneProps> = ({navigation}) => {
 
   const footer = useMemo(
     () => (
-      <TaggSquareButton
-        onPress={goNext}
-        title={'Next'}
-        buttonStyle={'normal'}
-        buttonColor={'white'}
-        labelColor={'blue'}
-      />
-      // // <View style={styles.footer}>
-      //   {/* <ArrowButton
-      //     direction="backward"
-      //     onPress={() => navigation.navigate('Login')}
-      //   /> */}
-      //   {/* <TouchableOpacity onPress={goNext}> */}
-      //     {/* <ArrowButton
-      //       direction="forward"
-      //       disabled={
-      //         !(form.isValidFname && form.isValidLname && form.isValidPhone)
-      //       }
-      //       onPress={goNext}
-      //     /> */}
-      //   {/* </TouchableOpacity> */}
-      // // </View>
+      <View style={styles.footer}>
+        <ArrowButton
+          direction="backward"
+          onPress={() => navigation.navigate('Login')}
+        />
+        <TouchableOpacity onPress={goNext}>
+          <ArrowButton
+            direction="forward"
+            disabled={
+              !(form.isValidFname && form.isValidLname && form.isValidPhone)
+            }
+            onPress={goNext}
+          />
+        </TouchableOpacity>
+      </View>
     ),
     [
       form.fname,
-      // form.lname,
-      // form.phone,
+      form.lname,
+      form.phone,
       form.isValidFname,
-      // form.isValidLname,
-      // form.isValidPhone,
+      form.isValidLname,
+      form.isValidPhone,
     ],
   );
 
@@ -183,14 +175,13 @@ const OnboardingStepOne: React.FC<OnboardingStepOneProps> = ({navigation}) => {
       style={styles.container}
       gradientType={BackgroundGradientType.Light}>
       <StatusBar barStyle="light-content" />
-      {/* getting rid of registration progress in onboarding*/}
-      {/* <RegistrationWizard style={styles.wizard} step="one" /> */}
+      <RegistrationWizard style={styles.wizard} step="one" />
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         style={styles.container}>
-        {/* <View style={{backgroundColor: 'thistle', position: 'absolute', top: 0, marginTop: '45%', height: 0}}> */}
-        <Text style={styles.formHeader}>SIGN UP</Text>
-        {/* </View> */}
+        <View>
+          <Text style={styles.formHeader}>ENTER NAME</Text>
+        </View>
         <TaggInput
           accessibilityHint="Enter your first name."
           accessibilityLabel="First name input field."
@@ -206,7 +197,7 @@ const OnboardingStepOne: React.FC<OnboardingStepOneProps> = ({navigation}) => {
           attemptedSubmit={form.attemptedSubmit}
           width={280}
         />
-        {/* <TaggInput
+        <TaggInput
           accessibilityHint="Enter your last name."
           accessibilityLabel="Last name input field."
           placeholder="Last Name"
@@ -220,8 +211,8 @@ const OnboardingStepOne: React.FC<OnboardingStepOneProps> = ({navigation}) => {
           invalidWarning="Please enter a valid last name."
           attemptedSubmit={form.attemptedSubmit}
           width={280}
-        /> */}
-        {/* <TaggInput
+        />
+        <TaggInput
           maxLength={10} // currently only support US phone numbers
           accessibilityHint="Enter your phone number."
           accessibilityLabel="Phone number input field."
@@ -238,32 +229,28 @@ const OnboardingStepOne: React.FC<OnboardingStepOneProps> = ({navigation}) => {
           attemptedSubmit={form.attemptedSubmit}
           width={280}
           onSubmitEditing={goNext}
-        /> */}
-        <View style={{position: 'absolute', bottom: 150}}>{footer}</View>
+        />
       </KeyboardAvoidingView>
+      {footer}
     </Background>
   );
 };
 
 const styles = StyleSheet.create({
   container: {
-    height: SCREEN_HEIGHT,
-    width: SCREEN_WIDTH,
+    flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
   },
-  button: {
-    width: 40,
-    aspectRatio: 10,
+  wizard: {
+    position: 'absolute',
+    top: SCREEN_HEIGHT * 0.1,
   },
   formHeader: {
     color: '#fff',
     fontSize: 30,
     fontWeight: '600',
     marginBottom: '16%',
-    position: 'absolute',
-    top: 0,
-    marginTop: '45%',
   },
   load: {
     top: '5%',
@@ -283,4 +270,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default OnboardingStepOne;
+export default OnboardingStepOne;
\ No newline at end of file
diff --git a/src/screens/onboarding/legacy/OnboardingStepTwo.tsx b/src/screens/onboarding/legacy/OnboardingStepTwo.tsx
index 65f953ea..40130263 100644
--- a/src/screens/onboarding/legacy/OnboardingStepTwo.tsx
+++ b/src/screens/onboarding/legacy/OnboardingStepTwo.tsx
@@ -13,10 +13,11 @@ import {
   View,
 } from 'react-native';
 import {
+  ArrowButton,
   Background,
   LoadingIndicator,
+  RegistrationWizard,
   TaggInput,
-  TaggSquareButton,
   TermsConditions,
 } from '../../../components';
 import {emailRegex, passwordRegex, usernameRegex} from '../../../constants';
@@ -28,6 +29,7 @@ import {
 import {OnboardingStackParams} from '../../../routes';
 import {sendRegister} from '../../../services';
 import {BackgroundGradientType} from '../../../types';
+import {SCREEN_HEIGHT} from '../../../utils';
 
 type OnboardingStepTwoRouteProp = RouteProp<
   OnboardingStackParams,
@@ -172,7 +174,7 @@ const OnboardingStepTwo: React.FC<OnboardingStepTwoProps> = ({
             switch (response.status) {
               case 201:
                 await AsyncStorage.setItem('token', token);
-                navigation.navigate('ProfileInfoOnboarding', {
+                navigation.navigate('OnboardingStepThree', {
                   userId: UserID,
                   username: username,
                 });
@@ -209,13 +211,24 @@ const OnboardingStepTwo: React.FC<OnboardingStepTwoProps> = ({
   const footer = useMemo(
     () => (
       <View style={styles.footer}>
+        <ArrowButton
+          direction="backward"
+          onPress={() =>
+            navigation.navigate('PhoneVerification', {...route.params})
+          }
+        />
         <TouchableOpacity onPress={handleRegister}>
-          <TaggSquareButton
-            onPress={goNext}
-            title={'Next'}
-            buttonStyle={'normal'}
-            buttonColor={'white'}
-            labelColor={'blue'}
+          <ArrowButton
+            direction="forward"
+            disabled={
+              !(
+                form.isValidUsername &&
+                form.isValidPassword &&
+                form.passwordsMatch &&
+                form.tcAccepted
+              )
+            }
+            onPress={handleRegister}
           />
         </TouchableOpacity>
       </View>
@@ -238,7 +251,7 @@ const OnboardingStepTwo: React.FC<OnboardingStepTwoProps> = ({
       style={styles.container}
       gradientType={BackgroundGradientType.Light}>
       <StatusBar barStyle="light-content" />
-      {/* <RegistrationWizard style={styles.wizard} step="two" /> */}
+      <RegistrationWizard style={styles.wizard} step="two" />
       <KeyboardAvoidingView
         behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
         style={styles.container}>
@@ -259,7 +272,7 @@ const OnboardingStepTwo: React.FC<OnboardingStepTwoProps> = ({
           ref={usernameRef}
           valid={form.isValidUsername}
           invalidWarning={
-            'Username must be at least 6 characters and contain only alphanumerics.'
+            'Username must be at least 6 characters and contain only alphanumerics.'
           }
           attemptedSubmit={form.attemptedSubmit}
           width={280}
@@ -334,10 +347,10 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     justifyContent: 'center',
   },
-  // wizard: {
-  //   position: 'absolute',
-  //   top: SCREEN_HEIGHT * 0.1,
-  // },
+  wizard: {
+    position: 'absolute',
+    top: SCREEN_HEIGHT * 0.1,
+  },
   formHeader: {
     color: '#fff',
     fontSize: 30,
@@ -365,4 +378,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default OnboardingStepTwo;
+export default OnboardingStepTwo;
\ No newline at end of file