diff --git a/packages/mobile/src/screens/root-screen/RootScreen.tsx b/packages/mobile/src/screens/root-screen/RootScreen.tsx index 93773e5211e..b430d1ca709 100644 --- a/packages/mobile/src/screens/root-screen/RootScreen.tsx +++ b/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 ( <> { : UpdateRequiredScreen } /> - ) : showHomeStack ? ( + ) : null} + + {showHomeStack ? ( ) : isSignUpRedesignEnabled ? ( diff --git a/packages/mobile/src/screens/sign-on-screen/SignOnStack.tsx b/packages/mobile/src/screens/sign-on-screen/SignOnStack.tsx index 48395291d3c..2b459db5e1f 100644 --- a/packages/mobile/src/screens/sign-on-screen/SignOnStack.tsx +++ b/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 = () => { + ) } diff --git a/packages/mobile/src/screens/sign-on-screen/components/AccountHeader.tsx b/packages/mobile/src/screens/sign-on-screen/components/AccountHeader.tsx index 84d2f4d1d09..2db4d331108 100644 --- a/packages/mobile/src/screens/sign-on-screen/components/AccountHeader.tsx +++ b/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 ( - - {onSelectProfilePicture ? ( - - ) : null} - + + + {onSelectProfilePicture && !profilePicture ? ( + + ) : null} + + ) } diff --git a/packages/mobile/src/screens/sign-on-screen/components/SocialMediaLoading.tsx b/packages/mobile/src/screens/sign-on-screen/components/SocialMediaLoading.tsx index 4ae95b48db4..44318ab79bf 100644 --- a/packages/mobile/src/screens/sign-on-screen/components/SocialMediaLoading.tsx +++ b/packages/mobile/src/screens/sign-on-screen/components/SocialMediaLoading.tsx @@ -1,6 +1,13 @@ 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 = { @@ -8,8 +15,8 @@ const messages = { connectingSocialMedia: 'We’re connecting your social account' } -export const SocialMediaLoading = () => { - const { color } = useTheme() +export const SocialMediaLoading = ({ onClose }: { onClose: () => void }) => { + const { color, spacing } = useTheme() return ( { backgroundColor: color.background.white })} > + {messages.hangTight} {'\n'} diff --git a/packages/mobile/src/screens/sign-on-screen/screens/AccountLoadingScreen.tsx b/packages/mobile/src/screens/sign-on-screen/screens/AccountLoadingScreen.tsx new file mode 100644 index 00000000000..e65f1982876 --- /dev/null +++ b/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 ( + + + + + + + ) +} diff --git a/packages/mobile/src/screens/sign-on-screen/screens/CreateEmailScreen.tsx b/packages/mobile/src/screens/sign-on-screen/screens/CreateEmailScreen.tsx index 3616d03fa17..20e4e806a18 100644 --- a/packages/mobile/src/screens/sign-on-screen/screens/CreateEmailScreen.tsx +++ b/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 ? : null} + {isWaitingForSocialLogin ? ( + + ) : null} { if (coverPhoto) { dispatch(setField('coverPhoto', { value: coverPhoto })) } + dispatch(signUp()) navigation.navigate('SelectGenre') }, [dispatch, navigation] diff --git a/packages/mobile/src/screens/sign-on-screen/screens/PickHandleScreen.tsx b/packages/mobile/src/screens/sign-on-screen/screens/PickHandleScreen.tsx index 035242bbdef..d25886b0f4e 100644 --- a/packages/mobile/src/screens/sign-on-screen/screens/PickHandleScreen.tsx +++ b/packages/mobile/src/screens/sign-on-screen/screens/PickHandleScreen.tsx @@ -145,7 +145,9 @@ export const PickHandleScreen = () => { > {({ handleSubmit: triggerSubmit, dirty, isValid }) => ( - {isWaitingForSocialLogin ? : null} + {isWaitingForSocialLogin ? ( + + ) : null} { ]) const selectedArtists = useSelector(getFollowIds) - const { toast } = useToast() + const dispatch = useDispatch() + const navigation = useNavigation() + + 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 ( diff --git a/packages/mobile/src/screens/sign-on-screen/types.ts b/packages/mobile/src/screens/sign-on-screen/types.ts index eae59909795..04929cc2785 100644 --- a/packages/mobile/src/screens/sign-on-screen/types.ts +++ b/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' } } diff --git a/packages/web/src/pages/sign-on-page/SignOnPage.tsx b/packages/web/src/pages/sign-on-page/SignOnPage.tsx index 08d213c194a..44b4cf92558 100644 --- a/packages/web/src/pages/sign-on-page/SignOnPage.tsx +++ b/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({ diff --git a/packages/web/src/pages/sign-up-page/pages/CreateEmailPage.tsx b/packages/web/src/pages/sign-up-page/pages/CreateEmailPage.tsx index 6ec64244de1..16d124d9507 100644 --- a/packages/web/src/pages/sign-up-page/pages/CreateEmailPage.tsx +++ b/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(