Merge pull request #269 from IvanIFChen/tma656-revamp-onboarding

[TMA-656] Revamp Onboarding

3 files changed, 64 insertions, 110 deletions

diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index acf0cd28..04f73985 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -80,20 +80,6 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
     }
   })();
 
-  const modalStyle: StackNavigationOptions = {
-    cardStyle: {backgroundColor: 'rgba(80,80,80,0.9)'},
-    gestureDirection: 'vertical',
-    cardOverlayEnabled: true,
-    cardStyleInterpolator: ({current: {progress}}) => ({
-      cardStyle: {
-        opacity: progress.interpolate({
-          inputRange: [0, 0.5, 0.9, 1],
-          outputRange: [0, 0.25, 0.7, 1],
-        }),
-      },
-    }),
-  };
-
   const tutorialModalStyle: StackNavigationOptions = {
     cardStyle: {backgroundColor: 'rgba(0, 0, 0, 0.5)'},
     gestureDirection: 'vertical',
@@ -263,7 +249,7 @@ export const headerBarOptions: (
   ),
 });
 
-const modalStyle: StackNavigationOptions = {
+export const modalStyle: StackNavigationOptions = {
   cardStyle: {backgroundColor: 'rgba(80,80,80,0.6)'},
   gestureDirection: 'vertical',
   cardOverlayEnabled: true,
diff --git a/src/routes/onboarding/OnboardingStackNavigator.tsx b/src/routes/onboarding/OnboardingStackNavigator.tsx
index 9f614f7c..0cdeecdf 100644
--- a/src/routes/onboarding/OnboardingStackNavigator.tsx
+++ b/src/routes/onboarding/OnboardingStackNavigator.tsx
@@ -1,46 +1,41 @@
 import {createStackNavigator} from '@react-navigation/stack';
-import {
-  CategorySelectionScreenType,
-  TaggPopupType,
-  UserType,
-  VerificationScreenType,
-} from '../../types';
+import {TaggPopupType, VerificationScreenType} from '../../types';
 
 export type OnboardingStackParams = {
-  WelcomeScreen: undefined;
   Login: undefined;
+  WelcomeScreen: undefined;
   PasswordResetRequest: undefined;
-  PasswordReset: {
-    value: string;
-  };
-  InvitationCodeVerification: undefined;
-  RegistrationOne: undefined;
-  RegistrationTwo: {phone: string};
-  RegistrationThree: {
-    firstName: string;
-    lastName: string;
-    phone: string;
-    email: string;
-  };
-  Checkpoint: {username: string; userId: string};
+  PasswordReset: {value: string};
   Verification: {id: string; screenType: VerificationScreenType};
-  ProfileOnboarding: {username: string; userId: string};
-  SocialMedia: {username: string; userId: string};
-  CategorySelection: {
-    screenType: CategorySelectionScreenType;
-    user: UserType;
-    newCustomCategory: string | undefined;
-  };
-  CreateCustomCategory: {
-    screenType: CategorySelectionScreenType;
-    user: UserType;
-    existingCategories: string[];
-  };
+  // RegistrationOne: undefined;
+  // RegistrationTwo: {phone: string};
+  // RegistrationThree: {
+  //   firstName: string;
+  //   lastName: string;
+  //   phone: string;
+  //   email: string;
+  // };
+  // Checkpoint: {username: string; userId: string};
+  // ProfileOnboarding: {username: string; userId: string};
+  // SocialMedia: {username: string; userId: string};
+  // CategorySelection: {
+  //   screenType: CategorySelectionScreenType;
+  //   user: UserType;
+  //   newCustomCategory: string | undefined;
+  // };
+  // CreateCustomCategory: {
+  //   screenType: CategorySelectionScreenType;
+  //   user: UserType;
+  //   existingCategories: string[];
+  // };
   TaggPopup: {
     popupProps: TaggPopupType;
   };
-  AddWaitlistUser: undefined;
-  WaitlistSuccess: undefined;
+  OnboardingStepOne: undefined;
+  PhoneVerification: {firstName: string; lastName: string; phone: string};
+  OnboardingStepTwo: {firstName: string; lastName: string; phone: string};
+  OnboardingStepThree: {userId: string; username: string};
+  InvitationCodeVerification: {userId: string};
 };
 
 export const OnboardingStack = createStackNavigator<OnboardingStackParams>();
diff --git a/src/routes/onboarding/OnboardingStackScreen.tsx b/src/routes/onboarding/OnboardingStackScreen.tsx
index 78f113cc..79171efd 100644
--- a/src/routes/onboarding/OnboardingStackScreen.tsx
+++ b/src/routes/onboarding/OnboardingStackScreen.tsx
@@ -1,24 +1,20 @@
+import {StackCardInterpolationProps} from '@react-navigation/stack';
 import React from 'react';
-import {OnboardingStack} from './OnboardingStackNavigator';
+import TaggPopup from '../../components/common/TaggPopup';
 import {
-  Login,
   InvitationCodeVerification,
-  RegistrationOne,
-  RegistrationTwo,
-  RegistrationThree,
-  Verification,
-  ProfileOnboarding,
-  Checkpoint,
-  SocialMedia,
-  PasswordResetRequest,
+  Login,
+  OnboardingStepThree,
+  OnboardingStepTwo,
   PasswordReset,
+  PasswordResetRequest,
+  PhoneVerification,
+  Verification,
   WelcomeScreen,
-  CategorySelection,
-  AddWaitlistUserScreen,
-  WaitlistSuccessScreen,
 } from '../../screens';
-import {StackCardInterpolationProps} from '@react-navigation/stack';
-import TaggPopup from '../../components/common/TaggPopup';
+import OnboardingStepOne from '../../screens/onboarding/OnboardingStepOne';
+import {modalStyle} from '../main';
+import {OnboardingStack} from './OnboardingStackNavigator';
 
 const forFade = ({current}: StackCardInterpolationProps) => ({
   cardStyle: {
@@ -37,6 +33,7 @@ const Onboarding: React.FC = () => {
         options={{
           gestureEnabled: false,
           cardStyleInterpolator: forFade,
+          ...modalStyle,
         }}
       />
       <OnboardingStack.Screen
@@ -46,37 +43,13 @@ const Onboarding: React.FC = () => {
           gestureEnabled: false,
         }}
       />
-      <OnboardingStack.Screen
-        name="WelcomeScreen"
-        component={WelcomeScreen}
-        options={{
-          gestureEnabled: false,
-        }}
-      />
-      <OnboardingStack.Screen
-        name="CategorySelection"
-        component={CategorySelection}
-        options={{
-          gestureEnabled: false,
-        }}
-      />
+      <OnboardingStack.Screen name="WelcomeScreen" component={WelcomeScreen} />
       <OnboardingStack.Screen
         name="TaggPopup"
         component={TaggPopup}
         options={{
           gestureEnabled: false,
-          cardStyle: {
-            backgroundColor: 'transparent',
-          },
-          cardOverlayEnabled: true,
-          cardStyleInterpolator: ({current: {progress}}) => ({
-            cardStyle: {
-              opacity: progress.interpolate({
-                inputRange: [0, 0.5, 0.9, 1],
-                outputRange: [0, 0.25, 0.7, 1],
-              }),
-            },
-          }),
+          ...modalStyle,
         }}
       />
       <OnboardingStack.Screen
@@ -84,42 +57,42 @@ const Onboarding: React.FC = () => {
         component={PasswordReset}
         options={{
           gestureEnabled: false,
+          ...modalStyle,
         }}
       />
       <OnboardingStack.Screen
-        name="InvitationCodeVerification"
-        component={InvitationCodeVerification}
-      />
-      <OnboardingStack.Screen
-        name="AddWaitlistUser"
-        component={AddWaitlistUserScreen}
+        name="Verification"
+        component={Verification}
+        options={{
+          ...modalStyle,
+        }}
       />
       <OnboardingStack.Screen
-        name="WaitlistSuccess"
-        component={WaitlistSuccessScreen}
+        name="OnboardingStepOne"
+        component={OnboardingStepOne}
       />
       <OnboardingStack.Screen
-        name="RegistrationOne"
-        component={RegistrationOne}
+        name="PhoneVerification"
+        component={PhoneVerification}
+        options={{...modalStyle}}
       />
       <OnboardingStack.Screen
-        name="RegistrationTwo"
-        component={RegistrationTwo}
+        name="OnboardingStepTwo"
+        component={OnboardingStepTwo}
+        options={{...modalStyle}}
       />
       <OnboardingStack.Screen
-        name="RegistrationThree"
-        component={RegistrationThree}
+        name="OnboardingStepThree"
+        component={OnboardingStepThree}
+        options={{...modalStyle}}
       />
-      <OnboardingStack.Screen name="Checkpoint" component={Checkpoint} />
-      <OnboardingStack.Screen name="Verification" component={Verification} />
       <OnboardingStack.Screen
-        name="ProfileOnboarding"
-        component={ProfileOnboarding}
+        name="InvitationCodeVerification"
+        component={InvitationCodeVerification}
         options={{
-          gestureEnabled: false,
+          ...modalStyle,
         }}
       />
-      <OnboardingStack.Screen name="SocialMedia" component={SocialMedia} />
     </OnboardingStack.Navigator>
   );
 };