[PE-7058] Fix signup skip flow and update UI

packages/common/src/messages/sign-on/pages.ts

@@ -128,5 +128,5 @@ export const welcomeModalMessages = {
 }
 
 export const skipButtonMessages = {
- skipThisStep: 'Skip this step'
+ skipThisStep: 'Skip'
 }

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

@@ -1,10 +1,10 @@
 import { useCallback } from 'react'
 
 import { skipButtonMessages } from '@audius/common/messages'
-import { finishSignUp } from '@audius/web/src/common/store/pages/signon/actions'
+import { signUp } from '@audius/web/src/common/store/pages/signon/actions'
 import { useDispatch } from 'react-redux'
 
-import { PlainButton } from '@audius/harmony-native'
+import { Button } from '@audius/harmony-native'
 import { useNavigation } from 'app/hooks/useNavigation'
 
 import type { SignOnScreenParamList } from '../types'
@@ -14,13 +14,14 @@ export const SkipButton = () => {
  const dispatch = useDispatch()
 
  const handleSkip = useCallback(() => {
- dispatch(finishSignUp())
+ // User is skipping genre/artist selection, create account now
+ dispatch(signUp())
  navigation.navigate('AccountLoading')
  }, [dispatch, navigation])
 
  return (
- <PlainButton onPress={handleSkip}>
+ <Button variant='secondary' fullWidth onPress={handleSkip}>
  {skipButtonMessages.skipThisStep}
- </PlainButton>
+ </Button>
  )
 }

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

@@ -2,14 +2,20 @@
 
 import { useEffect } from 'react'
 
-import { getAccountReady } from '@audius/web/src/common/store/pages/signon/selectors'
-import { useSelector } from 'react-redux'
+import { finishSignUp } from '@audius/web/src/common/store/pages/signon/actions'
+import {
+ getAccountReady,
+ getStatus
+} from '@audius/web/src/common/store/pages/signon/selectors'
+import { EditingStatus } from '@audius/web/src/common/store/pages/signon/types'
+import { useDispatch, 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'
+import { useFastReferral } from '../hooks/useFastReferral'
 import type { SignOnScreenParamList } from '../types'
 
 const messages = {
@@ -20,14 +26,24 @@ const messages = {
 
 // 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 dispatch = useDispatch()
  const navigation = useNavigation<SignOnScreenParamList>()
- const isAccountReady = useSelector(getAccountReady)
+ const isFastReferral = useFastReferral()
+ const accountReady = useSelector(getAccountReady)
+ const accountCreationStatus = useSelector(getStatus)
+
+ // Match web's logic: conditional check based on referral type
+ const isAccountReady = isFastReferral
+ ? accountReady
+ : accountReady || accountCreationStatus === EditingStatus.SUCCESS
 
  useEffect(() => {
  if (isAccountReady) {
+ // Mark sign up as finished so RootScreen shows HomeStack
+ dispatch(finishSignUp())
  navigation.navigate('HomeStack', { screen: 'Trending' })
  }
- }, [isAccountReady, navigation])
+ }, [isAccountReady, dispatch, navigation])
 
  return (
  <Page gap='3xl' justifyContent='center' alignItems='center' pb='3xl'>

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

@@ -63,10 +63,12 @@ export const FinishProfileScreen = () => {
  (values: FinishProfileValues) => {
  const { displayName } = values
  dispatch(setValueField('name', displayName))
- dispatch(signUp())
  if (isFastReferral) {
+ // Fast referral: create account immediately and skip genre/artist selection
+ dispatch(signUp())
  navigation.navigate('AccountLoading')
  } else {
+ // Normal flow: don't create account yet, let user select genres/artists first
  navigation.navigate('SelectGenre')
  }
  },

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

@@ -1,25 +1,19 @@
-import { useCallback } from 'react'
+import { useCallback, useState } from 'react'
 
 import { selectArtistsPageMessages } from '@audius/common/messages'
 import {
  addFollowArtists,
-finishSignUp,
+signUp,
  completeFollowArtists
 } from '@audius/web/src/common/store/pages/signon/actions'
-import { EditingStatus } from '@audius/web/src/common/store/pages/signon/types'
-import {
- getFollowIds,
- getGenres,
- getStatus
-} from 'common/store/pages/signon/selectors'
+import { getFollowIds, getGenres } from 'common/store/pages/signon/selectors'
 import { useDispatch, useSelector } from 'react-redux'
 
 import { Flex, Text } from '@audius/harmony-native'
 import { createCollapsibleTabNavigator } from 'app/components/top-tab-bar/createCollapsibleTabNavigator'
 import { useNavigation } from 'app/hooks/useNavigation'
 
 import { ReadOnlyAccountHeader } from '../../components/AccountHeader'
-import { SkipButton } from '../../components/SkipButton'
 import { Heading, PageFooter } from '../../components/layout'
 import type { SignOnScreenParamList } from '../../types'
 import { useTrackScreen } from '../../utils/useTrackScreen'
@@ -42,7 +36,7 @@ export const SelectArtistsScreen = () => {
  const navigation = useNavigation<SignOnScreenParamList>()
  useTrackScreen('SelectArtists')
 
- const accountCreationStatus = useSelector(getStatus)
+ const [isSubmitting, setIsSubmitting] = useState(false)
 
  const renderHeader = useCallback(
  () => (
@@ -62,15 +56,18 @@ export const SelectArtistsScreen = () => {
  )
 
  const handleSubmit = useCallback(() => {
- // Follow selected artists
- dispatch(addFollowArtists(selectedArtists))
- dispatch(completeFollowArtists())
+ setIsSubmitting(true)
 
- dispatch(finishSignUp())
- if (accountCreationStatus === EditingStatus.LOADING) {
- navigation.navigate('AccountLoading')
+ // Only add artists if some were selected
+ if (selectedArtists.length > 0) {
+ dispatch(addFollowArtists(selectedArtists))
+ dispatch(completeFollowArtists())
  }
- }, [accountCreationStatus, dispatch, navigation, selectedArtists])
+
+ // Always create the account (whether artists selected or not)
+ dispatch(signUp())
+ navigation.navigate('AccountLoading')
+ }, [dispatch, navigation, selectedArtists])
 
  return (
  <SelectArtistsPreviewContextProvider>
@@ -91,15 +88,18 @@ export const SelectArtistsScreen = () => {
  </Tab.Navigator>
  <PageFooter
  buttonProps={{
- disabled: selectedArtists.length < 3,
+ disabled: isSubmitting,
+ isLoading: isSubmitting,
  onPress: handleSubmit
  }}
- prefix={<SkipButton />}
- postfix={
- <Text variant='body'>
- {selectArtistsPageMessages.selected} {selectedArtists.length || 0}
- /3
- </Text>
+ prefix={
+ <Flex direction='column' gap='m' alignItems='center'>
+ <Text variant='body'>
+ {selectArtistsPageMessages.selected}{' '}
+ {selectedArtists.length || 0}
+ /3
+ </Text>
+ </Flex>
  }
  />
  </Flex>

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

@@ -129,7 +129,10 @@ export const SelectGenresScreen = () => {
  </Flex>
  </Paper>
  </ScrollView>
- <PageFooter prefix={<SkipButton />} />
+ <PageFooter
+ buttonProps={{ disabled: false }}
+ postfix={<SkipButton />}
+ />
  </View>
  </Formik>
  )

packages/web/src/pages/sign-up-page/components/SkipButton.tsx

@@ -2,22 +2,27 @@ import { useCallback } from 'react'
 
 import { skipButtonMessages } from '@audius/common/messages'
 import { route } from '@audius/common/utils'
-import { PlainButton } from '@audius/harmony'
+import { Button } from '@audius/harmony'
+import { useDispatch } from 'react-redux'
 
+import { signUp } from 'common/store/pages/signon/actions'
 import { useNavigateToPage } from 'hooks/useNavigateToPage'
 
 const { SIGN_UP_APP_CTA_PAGE } = route
 
 export const SkipButton = () => {
  const navigate = useNavigateToPage()
+ const dispatch = useDispatch()
 
  const handleSkip = useCallback(() => {
+ // User is skipping genre/artist selection, create account now
+ dispatch(signUp())
  navigate(SIGN_UP_APP_CTA_PAGE)
- }, [navigate])
+ }, [navigate, dispatch])
 
  return (
- <PlainButton onClick={handleSkip}>
+ <Button variant='secondary' fullWidth onClick={handleSkip}>
  {skipButtonMessages.skipThisStep}
- </PlainButton>
+ </Button>
  )
 }

packages/web/src/pages/sign-up-page/components/layout.tsx

@@ -190,7 +190,7 @@ type PageFooterProps = {
 } & Omit<PaperProps & BoxProps, 'prefix'>
 
 export const PageFooter = (props: PageFooterProps) => {
- const { prefix, postfix, buttonProps, centered, sticky, ...other} = props
+ const { prefix, postfix, buttonProps, centered, sticky, ...other} = props
  const { isMobile } = useMedia()
  // On the MobileCTAPage we use this footer outside a formik context, hence the default values
  const { isSubmitting, touched, isValid } = useFormikContext() ?? {
@@ -199,6 +199,9 @@ export const PageFooter = (props: PageFooterProps) => {
  isValid: true
  }
 
+ // Show buttons side-by-side on desktop when there's a postfix (Skip button)
+ const showButtonsSideBySide = !isMobile && postfix && !prefix
+
  return (
  <Paper
  w='100%'
@@ -220,18 +223,41 @@ export const PageFooter = (props: PageFooterProps) => {
  {...other}
  >
  {prefix}
- <Button
- type='submit'
- iconRight={IconArrowRight}
- fullWidth
- isLoading={isSubmitting}
- css={!isMobile && centered && { width: 343 }}
- disabled={!touched || !isValid}
- {...buttonProps}
- >
- {messages.continue}
- </Button>
- {postfix}
+ {showButtonsSideBySide ? (
+ <Flex
+ w='100%'
+ justifyContent='space-between'
+ alignItems='center'
+ gap='l'
+ css={centered ? { maxWidth: 343 } : undefined}
+ >
+ {postfix}
+ <Button
+ type='submit'
+ iconRight={IconArrowRight}
+ isLoading={isSubmitting}
+ disabled={!touched || !isValid}
+ {...buttonProps}
+ >
+ {messages.continue}
+ </Button>
+ </Flex>
+ ) : (
+ <>
+ <Button
+ type='submit'
+ iconRight={IconArrowRight}
+ fullWidth
+ isLoading={isSubmitting}
+ css={!isMobile && centered && { width: 343 }}
+ disabled={!touched || !isValid}
+ {...buttonProps}
+ >
+ {messages.continue}
+ </Button>
+ {postfix}
+ </>
+ )}
  </Paper>
  )
 }

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

@@ -8,7 +8,7 @@ import {
 } from '@audius/common/schemas'
 import { MAX_DISPLAY_NAME_LENGTH } from '@audius/common/services'
 import { route } from '@audius/common/utils'
-import { Flex, Paper, PlainButton, Text, useTheme } from '@audius/harmony'
+import { Button, Flex, Paper, Text, useTheme } from '@audius/harmony'
 import { Formik, Form, useField, useFormikContext } from 'formik'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory } from 'react-router-dom'
@@ -139,10 +139,12 @@ export const FinishProfilePage = () => {
  dispatch(setField('coverPhoto', coverPhoto))
  }
  dispatch(setFinishedPhase1(true))
- dispatch(signUp())
  if (isFastReferral) {
+ // Fast referral: create account immediately and skip genre/artist selection
+ dispatch(signUp())
  navigate(SIGN_UP_LOADING_PAGE)
  } else {
+ // Normal flow: don't create account yet, let user select genres/artists first
  navigate(SIGN_UP_GENRES_PAGE)
  }
  },
@@ -209,9 +211,9 @@ export const FinishProfilePage = () => {
  }
  postfix={
  isMobile || isSocialConnected ? null : (
- <PlainButton variant='subdued' onClick={history.goBack}>
+ <Button variant='secondary' fullWidth onClick={history.goBack}>
  {finishProfilePageMessages.goBack}
- </PlainButton>
+ </Button>
  )
  }
  />

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

@@ -3,12 +3,15 @@ import { useCallback } from 'react'
 import { route } from '@audius/common/utils'
 import { Flex, Hint, IconInfo } from '@audius/harmony'
 import { keyframes } from '@emotion/css'
+import { useSelector } from 'react-redux'
 
 import QRCode from 'assets/img/imageQR.png'
+import { getStatus } from 'common/store/pages/signon/selectors'
+import { EditingStatus } from 'common/store/pages/signon/types'
 import { useNavigateToPage } from 'hooks/useNavigateToPage'
 
 import { Heading, Page, PageFooter } from '../components/layout'
-const { SIGN_UP_COMPLETED_REDIRECT } = route
+const { SIGN_UP_COMPLETED_REDIRECT, SIGN_UP_LOADING_PAGE } = route
 
 const qrCodeScale = keyframes`
  0% {
@@ -34,10 +37,17 @@ const messages = {
 
 export const MobileAppCtaPage = () => {
  const navigate = useNavigateToPage()
+ const status = useSelector(getStatus)
 
  const handleContinue = useCallback(() => {
- navigate(SIGN_UP_COMPLETED_REDIRECT)
- }, [navigate])
+ // If account creation is complete, go to feed
+ // Otherwise, show loading screen until account is ready
+ if (status === EditingStatus.SUCCESS) {
+ navigate(SIGN_UP_COMPLETED_REDIRECT)
+ } else {
+ navigate(SIGN_UP_LOADING_PAGE)
+ }
+ }, [navigate, status])
 
  return (
  <Page gap='3xl' centered>