Merge pull request #336 from leonyjiang/tma739-bugfix-profile-onboarding-tutorial

[TMA-739] Bugfix — First Moment Tutorial

5 files changed, 79 insertions, 30 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/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,
     ]),
   );
 
diff --git a/src/routes/main/MainStackNavigator.tsx b/src/routes/main/MainStackNavigator.tsx
index 4563ec95..9b089634 100644
--- a/src/routes/main/MainStackNavigator.tsx
+++ b/src/routes/main/MainStackNavigator.tsx
@@ -72,6 +72,7 @@ export type MainStackParams = {
   MomentUploadPrompt: {
     screenType: ScreenType;
     momentCategory: string;
+    profileBodyHeight: number;
   };
   AnimatedTutorial: {
     screenType: ScreenType;
diff --git a/src/screens/profile/MomentUploadPromptScreen.tsx b/src/screens/profile/MomentUploadPromptScreen.tsx
index 9d46c1e9..f79c81b4 100644
--- a/src/screens/profile/MomentUploadPromptScreen.tsx
+++ b/src/screens/profile/MomentUploadPromptScreen.tsx
@@ -7,6 +7,8 @@ import {StyleSheet, Text, View} from 'react-native';
 import {Moment} from '../../components';
 import {Image} from 'react-native-animatable';
 import {UPLOAD_MOMENT_PROMPT_ONE_MESSAGE} from '../../constants/strings';
+import {PROFILE_CUTOUT_BOTTOM_Y} from '../../constants';
+import {isIPhoneX, normalize} from '../../utils';
 
 type MomentUploadPromptScreenRouteProp = RouteProp<
   MainStackParams,
@@ -26,12 +28,10 @@ const MomentUploadPromptScreen: React.FC<MomentUploadPromptScreenProps> = ({
   route,
   navigation,
 }) => {
-  const {screenType, momentCategory} = route.params;
+  const {screenType, momentCategory, profileBodyHeight} = route.params;
   return (
     <View style={styles.container}>
       <CloseIcon
-        height={'10%'}
-        width={'10%'}
         color={'white'}
         style={styles.closeButton}
         onPress={() => {
@@ -42,7 +42,11 @@ const MomentUploadPromptScreen: React.FC<MomentUploadPromptScreenProps> = ({
       <Text style={styles.text}>{UPLOAD_MOMENT_PROMPT_ONE_MESSAGE}</Text>
       <Image
         source={require('../../assets/gifs/dotted-arrow-white.gif')}
-        style={styles.arrowGif}
+        style={[
+          StyleSheet.absoluteFill,
+          styles.arrowGif,
+          {top: profileBodyHeight + PROFILE_CUTOUT_BOTTOM_Y},
+        ]}
       />
       <Moment
         key={1}
@@ -55,7 +59,12 @@ const MomentUploadPromptScreen: React.FC<MomentUploadPromptScreenProps> = ({
         showDownButton={false}
         showUpButton={false}
         externalStyles={{
-          container: styles.momentContainer,
+          container: {
+            ...styles.momentContainer,
+            top: isIPhoneX()
+              ? profileBodyHeight + 615
+              : profileBodyHeight + 500,
+          },
           titleText: styles.momentHeaderText,
           header: styles.momentHeader,
           scrollContainer: styles.momentScrollContainer,
@@ -67,32 +76,28 @@ const MomentUploadPromptScreen: React.FC<MomentUploadPromptScreenProps> = ({
 
 const styles = StyleSheet.create({
   container: {
+    flex: 1,
     flexDirection: 'column',
-    justifyContent: 'center',
   },
   closeButton: {
-    position: 'relative',
-    height: '48%',
-    aspectRatio: 1,
-    top: 20,
+    ...StyleSheet.absoluteFillObject,
+    top: 45,
+    left: 20,
+    width: 40,
+    height: 40,
   },
   text: {
-    justifyContent: 'center',
+    marginTop: 250,
     color: '#fff',
     fontWeight: 'bold',
-    fontSize: 20,
+    fontSize: normalize(20),
     textAlign: 'center',
-    position: 'relative',
-    top: '40%',
   },
   arrowGif: {
-    position: 'relative',
-    width: '25%',
-    height: '40%',
-    left: '40%',
-    aspectRatio: 1.2,
-    top: '50%',
-    transform: [{scaleX: -1}, {rotate: '15deg'}],
+    width: 200,
+    height: 150,
+    left: 120,
+    transform: [{rotate: '350deg'}, {rotateY: '180deg'}],
   },
 
   //Styles to adjust moment container
@@ -100,14 +105,18 @@ const styles = StyleSheet.create({
     backgroundColor: 'transparent',
   },
   momentContainer: {
-    top: '62%',
+    ...StyleSheet.absoluteFillObject,
     backgroundColor: 'transparent',
+    height: 170,
   },
   momentHeaderText: {
-    paddingBottom: '5%',
+    ...StyleSheet.absoluteFillObject,
+    marginLeft: 12,
+    marginTop: 10,
   },
   momentHeader: {
     backgroundColor: 'transparent',
+    paddingVertical: 20,
   },
 });
 
diff --git a/src/types/types.ts b/src/types/types.ts
index 87d61b2e..86f16f05 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -212,6 +212,9 @@ export interface ContentProps {
   y: Animated.Value<number>;
   userXId: string | undefined;
   screenType: ScreenType;
+  setScrollEnabled: (enabled: boolean) => void;
+  profileBodyHeight: number;
+  scrollViewRef: React.MutableRefObject<null>;
 }
 
 export type NotificationType = {