3 files changed, 57 insertions, 17 deletions
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index a22b9728..9c33eabc 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -1,4 +1,4 @@
-import React, {useCallback, useEffect, useState} from 'react';
+import React, {useCallback, useEffect, useRef, useState} from 'react';
 import {
   LayoutChangeEvent,
   NativeScrollEvent,
@@ -28,17 +28,16 @@ import {
   SCREEN_HEIGHT,
   userLogin,
 } from '../../utils';
+import TaggsBar from '../taggs/TaggsBar';
 import Cover from './Cover';
 import PrivateProfile from './PrivateProfile';
 import ProfileBody from './ProfileBody';
 import ProfileCutout from './ProfileCutout';
 import ProfileHeader from './ProfileHeader';
 import PublicProfile from './PublicProfile';
-import TaggsBar from '../taggs/TaggsBar';
 
 const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
   const dispatch = useDispatch();
-  const state: RootState = useStore().getState();
   const {
     user = NO_USER,
     profile = NO_PROFILE,
@@ -51,6 +50,16 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
   const {user: loggedInUser = NO_USER} = useSelector(
     (state: RootState) => state.user,
   );
+  const state: RootState = useStore().getState();
+
+  /*
+   * Used to imperatively scroll to the top when presenting the moment tutorial.
+   */
+  const scrollViewRef = useRef(null);
+  /*
+   * If scrolling is enabled. Set to false before scrolling up for the tutorial.
+   */
+  const [scrollEnabled, setScrollEnabled] = useState<boolean>(true);
 
   /**
    * States
@@ -128,6 +137,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
 
   return (
     <Animated.ScrollView
+      ref={scrollViewRef}
       contentContainerStyle={styles.contentContainer}
       style={styles.container}
       onScroll={(e) => handleScroll(e)}
@@ -135,6 +145,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
       showsVerticalScrollIndicator={false}
       scrollEventThrottle={1}
       stickyHeaderIndices={[4]}
+      scrollEnabled={scrollEnabled}
       refreshControl={
         <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
       }>
@@ -157,7 +168,16 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
         whiteRing={undefined}
       />
       {canViewProfile(state, userXId, screenType) ? (
-        <PublicProfile {...{y, userXId, screenType}} />
+        <PublicProfile
+          {...{
+            y,
+            userXId,
+            screenType,
+            setScrollEnabled,
+            profileBodyHeight,
+            scrollViewRef,
+          }}
+        />
       ) : (
         <PrivateProfile />
       )}
diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx
index a77a2e84..f70f90d0 100644
--- a/src/components/profile/ProfileMoreInfoDrawer.tsx
+++ b/src/components/profile/ProfileMoreInfoDrawer.tsx
@@ -3,7 +3,6 @@ import React from 'react';
 import {Alert, Image, StyleSheet, TouchableOpacity} from 'react-native';
 import {useSelector} from 'react-redux';
 import MoreIcon from '../../assets/icons/more_horiz-24px.svg';
-import PersonOutline from '../../assets/ionicons/person-outline.svg';
 import {TAGG_DARK_BLUE, TAGG_LIGHT_BLUE} from '../../constants';
 import {ERROR_ATTEMPT_EDIT_SP} from '../../constants/strings';
 import {RootState} from '../../store/rootreducer';
@@ -29,21 +28,19 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
   const isOwnProfile = !userXId || userXName === username;
 
   const goToEditProfile = () => {
-    navigation.push('EditProfile', {
+    navigation.navigate('EditProfile', {
       userId: userId,
       username: username,
     });
     setIsOpen(false);
   };
 
-  const goToUpdateSPProfile = () => {
+  const goToSettingsPage = () => {
     if (profile.suggested_people_linked === 0) {
       Alert.alert(ERROR_ATTEMPT_EDIT_SP);
     } else {
       // Sending undefined for updatedSelectedBadges to mark that there was no update yet
-      navigation.push('UpdateSPPicture', {
-        editing: true,
-      });
+      navigation.navigate('SettingsScreen');
       setIsOpen(false);
     }
   };
@@ -81,14 +78,21 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
           textColor={'black'}
           buttons={[
             [
-              'Edit Suggested',
-              goToUpdateSPProfile,
+              'Settings',
+              goToSettingsPage,
               <Image
-                source={require('../../assets/ionicons/suggested-outlined.png')}
+                source={require('../../assets/images/settings/settings.png')}
+                style={styles.image}
+              />,
+            ],
+            [
+              'Edit Profile',
+              goToEditProfile,
+              <Image
+                source={require('../../assets/images/settings/edit-profile.png')}
                 style={styles.image}
               />,
             ],
-            ['Edit Profile', goToEditProfile, <PersonOutline color="black" />],
           ]}
         />
       )}
diff --git a/src/components/profile/PublicProfile.tsx b/src/components/profile/PublicProfile.tsx
index 9683d8f2..88e0ecd1 100644
--- a/src/components/profile/PublicProfile.tsx
+++ b/src/components/profile/PublicProfile.tsx
@@ -30,7 +30,13 @@ import {moveCategory, normalize, SCREEN_HEIGHT} from '../../utils';
 import {TaggPrompt} from '../common';
 import {Moment} from '../moments';
 
-const PublicProfile: React.FC<ContentProps> = ({userXId, screenType}) => {
+const PublicProfile: React.FC<ContentProps> = ({
+  userXId,
+  screenType,
+  setScrollEnabled,
+  profileBodyHeight,
+  scrollViewRef,
+}) => {
   const dispatch = useDispatch();
 
   const {profile = NO_PROFILE} = useSelector((state: RootState) =>
@@ -89,11 +95,15 @@ const PublicProfile: React.FC<ContentProps> = ({userXId, screenType}) => {
             if (
               momentCategories &&
               momentCategories[0] &&
-              !isStageOnePromptClosed
+              !isStageOnePromptClosed &&
+              scrollViewRef.current
             ) {
+              setScrollEnabled(false);
+              scrollViewRef.current.getNode().scrollTo({y: 0});
               navigation.navigate('MomentUploadPrompt', {
                 screenType,
                 momentCategory: momentCategories[0],
+                profileBodyHeight,
               });
               setIsStageOnePromptClosed(true);
             }
@@ -109,15 +119,21 @@ const PublicProfile: React.FC<ContentProps> = ({userXId, screenType}) => {
         }
       };
       if (!userXId) {
-        setTimeout(navigateToMomentUploadPrompt, 2000);
+        setTimeout(() => {
+          navigateToMomentUploadPrompt();
+          setScrollEnabled(true);
+        }, 2000);
       }
     }, [
       userXId,
       profile.profile_completion_stage,
       momentCategories,
       isStageOnePromptClosed,
+      setScrollEnabled,
       navigation,
       screenType,
+      profileBodyHeight,
+      scrollViewRef,
     ]),
   );