[C-3577] Create account logic for native (#7145)

packages/mobile/src/screens/root-screen/RootScreen.tsx

@@ -8,10 +8,14 @@ import {
   Status
 } from '@audius/common'
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
-import { getHasCompletedAccount } from 'common/store/pages/signon/selectors'
+import {
+  getHasCompletedAccount,
+  getStartedSignUpProcess
+} from 'common/store/pages/signon/selectors'
 import { useDispatch, useSelector } from 'react-redux'
 
 import useAppState from 'app/hooks/useAppState'
+import { useDrawer } from 'app/hooks/useDrawer'
 import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
 import { useUpdateRequired } from 'app/hooks/useUpdateRequired'
 import { useSyncCodePush } from 'app/screens/root-screen/useSyncCodePush'
@@ -55,12 +59,16 @@ export const RootScreen = () => {
   const dispatch = useDispatch()
   const accountStatus = useSelector(getAccountStatus)
   const showHomeStack = useSelector(getHasCompletedAccount)
+  const startedSignUp = useSelector(getStartedSignUpProcess)
+  const [welcomeModalShown, setWelcomeModalShown] = useState(false)
   const [isLoaded, setIsLoaded] = useState(false)
   const [isSplashScreenDismissed, setIsSplashScreenDismissed] = useState(false)
   const { isEnabled: isSignUpRedesignEnabled } = useFeatureFlag(
     FeatureFlags.SIGN_UP_REDESIGN
   )
 
+  const { onOpen: openWelcomeDrawer } = useDrawer('Welcome')
+
   useAppState(
     () => dispatch(enterForeground()),
     () => dispatch(enterBackground())
@@ -94,6 +102,21 @@ export const RootScreen = () => {
     setIsSplashScreenDismissed(true)
   }, [])
 
+  useEffect(() => {
+    if (isSignUpRedesignEnabled) {
+      if (showHomeStack && startedSignUp && !welcomeModalShown) {
+        openWelcomeDrawer()
+        setWelcomeModalShown(true)
+      }
+    }
+  }, [
+    isSignUpRedesignEnabled,
+    openWelcomeDrawer,
+    showHomeStack,
+    startedSignUp,
+    welcomeModalShown
+  ])
+
   return (
     <>
       <SplashScreen
@@ -117,7 +140,9 @@ export const RootScreen = () => {
                   : UpdateRequiredScreen
               }
             />
-          ) : showHomeStack ? (
+          ) : null}
+
+          {showHomeStack ? (
             <Stack.Screen name='HomeStack' component={AppDrawerScreen} />
           ) : isSignUpRedesignEnabled ? (
             <Stack.Screen name='SignOnStackNew' component={SignOnStack} />

packages/mobile/src/screens/sign-on-screen/SignOnStack.tsx

@@ -2,6 +2,7 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack'
 
 import { useScreenOptions } from 'app/app/navigation'
 
+import { AccountLoadingScreen } from './screens/AccountLoadingScreen'
 import { CreateLoginDetailsScreen } from './screens/CreateLoginDetailsScreen'
 import { CreatePasswordScreen } from './screens/CreatePasswordScreen'
 import { FinishProfileScreen } from './screens/FinishProfileScreen'
@@ -34,6 +35,11 @@ export const SignOnStack = () => {
       <Stack.Screen name='FinishProfile' component={FinishProfileScreen} />
       <Stack.Screen name='SelectGenre' component={SelectGenresScreen} />
       <Stack.Screen name='SelectArtists' component={SelectArtistsScreen} />
+      <Stack.Screen
+        name='AccountLoading'
+        component={AccountLoadingScreen}
+        options={{ headerShown: false }}
+      />
     </Stack.Navigator>
   )
 }

packages/mobile/src/screens/sign-on-screen/components/AccountHeader.tsx

@@ -7,7 +7,7 @@ import {
   getProfileImageField
 } from 'audius-client/src/common/store/pages/signon/selectors'
 import { isEmpty } from 'lodash'
-import type { ImageURISource } from 'react-native'
+import { Pressable, type ImageURISource } from 'react-native'
 import { useSelector } from 'react-redux'
 
 import {
@@ -155,23 +155,25 @@ export const ProfilePicture = (props: ProfilePictureProps) => {
   const { profilePicture, onSelectProfilePicture } = props
 
   return (
-    <Avatar
-      accessibilityLabel='Profile Picture'
-      size='xl'
-      variant='strong'
-      source={profilePicture ?? { uri: undefined }}
-    >
-      {onSelectProfilePicture ? (
-        <IconButton
-          accessibilityLabel={messages.selectProfilePicture}
-          icon={IconCamera}
-          size='2xl'
-          color='staticWhite'
-          shadow='near'
-          onPress={onSelectProfilePicture}
-        />
-      ) : null}
-    </Avatar>
+    <Pressable onPress={onSelectProfilePicture}>
+      <Avatar
+        accessibilityLabel='Profile Picture'
+        size='xl'
+        variant='strong'
+        source={profilePicture ?? { uri: undefined }}
+      >
+        {onSelectProfilePicture && !profilePicture ? (
+          <IconButton
+            accessibilityLabel={messages.selectProfilePicture}
+            icon={IconCamera}
+            size='2xl'
+            color='staticWhite'
+            shadow='near'
+            onPress={onSelectProfilePicture}
+          />
+        ) : null}
+      </Avatar>
+    </Pressable>
   )
 }
 

packages/mobile/src/screens/sign-on-screen/components/SocialMediaLoading.tsx

@@ -1,15 +1,22 @@
 import { css } from '@emotion/native'
 
-import { Box, Flex, Text, useTheme } from '@audius/harmony-native'
+import {
+  Box,
+  Flex,
+  IconButton,
+  IconClose,
+  Text,
+  useTheme
+} from '@audius/harmony-native'
 import { LoadingMoreSpinner } from 'app/screens/favorites-screen/LoadingMoreSpinner'
 
 const messages = {
   hangTight: 'Hang tight!',
   connectingSocialMedia: 'We’re connecting your social account'
 }
 
-export const SocialMediaLoading = () => {
-  const { color } = useTheme()
+export const SocialMediaLoading = ({ onClose }: { onClose: () => void }) => {
+  const { color, spacing } = useTheme()
   return (
     <Flex
       direction='column'
@@ -29,6 +36,17 @@ export const SocialMediaLoading = () => {
         backgroundColor: color.background.white
       })}
     >
+      <IconButton
+        color='subdued'
+        icon={IconClose}
+        aria-label='Return to email screen'
+        style={css({
+          position: 'absolute',
+          top: spacing.xl,
+          left: spacing.xl
+        })}
+        onPress={onClose}
+      />
       <Text variant='heading' size='m' color='accent' textAlign='center'>
         {messages.hangTight}
         {'\n'}

packages/mobile/src/screens/sign-on-screen/screens/AccountLoadingScreen.tsx

@@ -0,0 +1,44 @@
+// This loading page shows up when the users account is still being created either due to slow creation or a fast user
+
+import { useEffect } from 'react'
+
+import { getStatus } from 'audius-client/src/common/store/pages/signon/selectors'
+import { EditingStatus } from 'audius-client/src/common/store/pages/signon/types'
+import { useSelector } from 'react-redux'
+
+import { Flex } from '@audius/harmony-native'
+import LoadingSpinner from 'app/components/loading-spinner'
+import { useNavigation } from 'app/hooks/useNavigation'
+
+import { Heading, Page } from '../components/layout'
+
+const messages = {
+  heading: 'Your Account is Almost Ready to Rock 🤘',
+  description: "We're just finishing up a few things..."
+}
+
+// The user just waits here until the account is created and before being shown the welcome modal on the trending page
+export const AccountLoadingScreen = () => {
+  const navigation = useNavigation()
+
+  const accountCreationStatus = useSelector(getStatus)
+
+  useEffect(() => {
+    if (accountCreationStatus === EditingStatus.SUCCESS) {
+      navigation.navigate('HomeStack', { screen: 'Trending' })
+    }
+  }, [accountCreationStatus, navigation])
+
+  return (
+    <Page gap='3xl' justifyContent='center' alignItems='center' pb='3xl'>
+      <LoadingSpinner style={{ height: 36, width: 36 }} />
+      <Flex justifyContent='center'>
+        <Heading
+          heading={messages.heading}
+          description={messages.description}
+          centered
+        />
+      </Flex>
+    </Page>
+  )
+}

packages/mobile/src/screens/sign-on-screen/screens/CreateEmailScreen.tsx

@@ -7,7 +7,8 @@ import {
 } from '@audius/common'
 import {
   setLinkedSocialOnFirstPage,
-  setValueField
+  setValueField,
+  startSignUp
 } from 'common/store/pages/signon/actions'
 import {
   getEmailField,
@@ -54,6 +55,7 @@ export const CreateEmailScreen = (props: SignOnScreenProps) => {
     (values: SignUpEmailValues) => {
       const { email } = values
       dispatch(setValueField('email', email))
+      dispatch(startSignUp())
       navigation.navigate('CreatePassword', { email })
     },
     [dispatch, navigation]
@@ -93,7 +95,9 @@ export const CreateEmailScreen = (props: SignOnScreenProps) => {
     >
       {({ handleSubmit }) => (
         <>
-          {isWaitingForSocialLogin ? <SocialMediaLoading /> : null}
+          {isWaitingForSocialLogin ? (
+            <SocialMediaLoading onClose={handleCloseSocialMediaLogin} />
+          ) : null}
           <Heading
             heading={messages.title}
             description={

packages/mobile/src/screens/sign-on-screen/screens/FinishProfileScreen.tsx

@@ -10,7 +10,11 @@ import {
   getHandleField,
   getIsVerified
 } from 'audius-client/src/common/store/pages/signon/selectors'
-import { setField, setValueField } from 'common/store/pages/signon/actions'
+import {
+  setField,
+  setValueField,
+  signUp
+} from 'common/store/pages/signon/actions'
 import { Formik, useField } from 'formik'
 import { isEmpty } from 'lodash'
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
@@ -55,6 +59,7 @@ export const FinishProfileScreen = () => {
       if (coverPhoto) {
         dispatch(setField('coverPhoto', { value: coverPhoto }))
       }
+      dispatch(signUp())
       navigation.navigate('SelectGenre')
     },
     [dispatch, navigation]

packages/mobile/src/screens/sign-on-screen/screens/PickHandleScreen.tsx

@@ -145,7 +145,9 @@ export const PickHandleScreen = () => {
     >
       {({ handleSubmit: triggerSubmit, dirty, isValid }) => (
         <Page>
-          {isWaitingForSocialLogin ? <SocialMediaLoading /> : null}
+          {isWaitingForSocialLogin ? (
+            <SocialMediaLoading onClose={handleCloseSocialMediaLogin} />
+          ) : null}
           <Heading
             heading={messages.title}
             description={messages.description}

packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/SelectArtistsScreen.tsx

@@ -1,15 +1,25 @@
 import { useCallback } from 'react'
 
 import { selectArtstsPageMessages as messages } from '@audius/common'
-import { getFollowIds, getGenres } from 'common/store/pages/signon/selectors'
+import {
+  finishSignUp,
+  signUpSucceeded
+} from 'audius-client/src/common/store/pages/signon/actions'
+import { EditingStatus } from 'audius-client/src/common/store/pages/signon/types'
+import {
+  getFollowIds,
+  getGenres,
+  getStatus
+} from 'common/store/pages/signon/selectors'
 import { createMaterialCollapsibleTopTabNavigator } from 'react-native-collapsible-tab-view'
-import { useSelector } from 'react-redux'
+import { useDispatch, useSelector } from 'react-redux'
 
 import { Flex, Text } from '@audius/harmony-native'
-import { useToast } from 'app/hooks/useToast'
+import { useNavigation } from 'app/hooks/useNavigation'
 
 import { ReadOnlyAccountHeader } from '../../components/AccountHeader'
 import { Heading, PageFooter } from '../../components/layout'
+import type { SignUpScreenParamList } from '../../types'
 
 import { SelectedGenresTabBar } from './SelectedGenresTabBar'
 import { TopArtistsCardList } from './TopArtistsCardList'
@@ -25,7 +35,10 @@ export const SelectArtistsScreen = () => {
   ])
 
   const selectedArtists = useSelector(getFollowIds)
-  const { toast } = useToast()
+  const dispatch = useDispatch()
+  const navigation = useNavigation<SignUpScreenParamList>()
+
+  const accountCreationStatus = useSelector(getStatus)
 
   const renderHeader = useCallback(
     () => (
@@ -45,8 +58,15 @@ export const SelectArtistsScreen = () => {
   )
 
   const handleSubmit = useCallback(() => {
-    toast({ content: 'TODO: Create Account' })
-  }, [toast])
+    if (accountCreationStatus === EditingStatus.LOADING) {
+      navigation.navigate('AccountLoading')
+    } else {
+      // This call is what triggers the RootScreen to redirect to the home page (via conditional rendering)
+      dispatch(finishSignUp())
+      // This call is just for analytics event tracking purposes
+      dispatch(signUpSucceeded())
+    }
+  }, [accountCreationStatus, dispatch, navigation])
 
   return (
     <SelectArtistsPreviewContextProvider>

packages/mobile/src/screens/sign-on-screen/types.ts

@@ -10,4 +10,7 @@ export type SignUpScreenParamList = {
   SelectArtists: undefined
   ReviewHandle: undefined
   CreateLoginDetails: undefined
+  AccountLoading: undefined
+  // For leaving signup
+  HomeStack: { screen: 'Trending' }
 }

packages/web/src/pages/sign-on-page/SignOnPage.tsx

@@ -48,7 +48,6 @@ type RootProps = {
 const DesktopSignOnRoot = (props: RootProps) => {
   const { children } = props
   const { spacing, motion } = useTheme()
-
   const accountCreationStatus = useSelector(getStatus)
 
   const collapsedDesktopPageMatch = useRouteMatch({

packages/web/src/pages/sign-up-page/pages/CreateEmailPage.tsx

@@ -24,7 +24,8 @@ import audiusLogoColored from 'assets/img/audiusLogoColored.png'
 import {
   resetSignOn,
   setLinkedSocialOnFirstPage,
-  setValueField
+  setValueField,
+  startSignUp
 } from 'common/store/pages/signon/actions'
 import {
   getEmailField,
@@ -76,6 +77,7 @@ export const CreateEmailPage = () => {
   const handleCompleteSocialMediaLogin = useCallback(
     (result: { requiresReview: boolean; handle: string }) => {
       const { handle, requiresReview } = result
+      dispatch(startSignUp())
       dispatch(setLinkedSocialOnFirstPage(true))
       dispatch(setValueField('handle', handle))
       navigate(