[TMA 491 Frontend] Revamp onboarding (#173)

* First commit, arrow excluded

* Done from my side

* Some small nitpicks

* exclude tsconfig

* Show profile screen after onboarding

* Update string

* Small fix

* small cosmetic

1 files changed, 78 insertions, 6 deletions

diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 5fa05588..227e6783 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -43,8 +43,9 @@ import {
 } from '../../store/initialStates';
 import {Cover} from '.';
 import {TouchableOpacity} from 'react-native-gesture-handler';
-import {useNavigation} from '@react-navigation/native';
+import {useFocusEffect, useNavigation} from '@react-navigation/native';
 import GreyPlusLogo from '../../assets/icons/grey-plus-logo.svg';
+import {TaggPrompt} from '../common';
 
 interface ContentProps {
   y: Animated.Value<number>;
@@ -97,6 +98,14 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
   const [shouldBounce, setShouldBounce] = useState<boolean>(true);
   const [refreshing, setRefreshing] = useState<boolean>(false);
 
+  //These two booleans are used to see if user closed the pormpt displayed to them
+  const [isStageTwoPromptClosed, setIsStageTwoPromptClosed] = useState<boolean>(
+    false,
+  );
+  const [isStageThreePromptClosed, setIsStageThreePromptClosed] = useState<
+    boolean
+  >(false);
+
   const onRefresh = useCallback(() => {
     const refrestState = async () => {
       if (!userXId) {
@@ -134,6 +143,43 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
   }, [createImagesMap]);
 
   /**
+   * Prompt user to perform an activity based on their profile completion stage
+   * To fire 2 seconds after the screen comes in focus
+   * 1 means STAGE_1:
+   *    The user must upload a moment, so take them to a screen  guiding them to post a moment
+   * 2 means STAGE_2:
+   *    The user must create another category so show a prompt on top of the screen
+   * 3 means STAGE_3:
+   *    The user must upload a moment to the second category, so show a prompt on top of the screen
+   * Else, profile is complete and no prompt needs to be shown
+   */
+  useFocusEffect(
+    useCallback(() => {
+      const navigateToMomentUploadPrompt = () => {
+        switch (profile.profile_completion_stage) {
+          case 1:
+            if (momentCategories && momentCategories[0]) {
+              navigation.navigate('MomentUploadPrompt', {
+                screenType,
+                momentCategory: momentCategories[0],
+              });
+            }
+            break;
+          case 2:
+            setIsStageTwoPromptClosed(false);
+            break;
+          case 3:
+            setIsStageThreePromptClosed(false);
+            break;
+          default:
+            break;
+        }
+      };
+      setTimeout(navigateToMomentUploadPrompt, 2000);
+    }, [profile.profile_completion_stage, momentCategories]),
+  );
+
+  /**
    * This hook is called on load of profile and when you update the friends list.
    */
   useEffect(() => {
@@ -227,10 +273,8 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
           onPress: () => {
             dispatch(
               updateMomentCategories(
-                momentCategories.filter(
-                  (mc) => mc !== category,
-                  loggedInUser.userId,
-                ),
+                momentCategories.filter((mc) => mc !== category),
+                false,
               ),
             );
             dispatch(deleteUserMomentsForCategory(category));
@@ -296,6 +340,34 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
             } has not posted any moments yet`}</Text>
           </View>
         )}
+        {!userXId &&
+          profile.profile_completion_stage === 2 &&
+          !isStageTwoPromptClosed && (
+            <TaggPrompt
+              messageHeader="Create a new category"
+              messageBody={
+                'Post your first moment to continue building your digital identity!'
+              }
+              logoType=""
+              onClose={() => {
+                setIsStageTwoPromptClosed(true);
+              }}
+            />
+          )}
+        {!userXId &&
+          profile.profile_completion_stage === 3 &&
+          !isStageThreePromptClosed && (
+            <TaggPrompt
+              messageHeader="Continue to build your profile"
+              messageBody={
+                'Continue to personalize your own digital space in\nthis community by filling your profile with\ncategories and moments!'
+              }
+              logoType=""
+              onClose={() => {
+                setIsStageThreePromptClosed(true);
+              }}
+            />
+          )}
         {momentCategories.map(
           (title, index) =>
             (!userXId || imagesMap.get(title)) && (
@@ -310,7 +382,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
               />
             ),
         )}
-        {!userXId && (
+        {!userXId && profile.profile_completion_stage !== 1 && (
           <TouchableOpacity
             onPress={() =>
               navigation.push('CategorySelection', {