Misc Sign Up QA Fixes (#7722)

packages/common/src/schemas/sign-on/finishProfileSchema.ts

@@ -3,7 +3,9 @@ import { z } from 'zod'
 import { MAX_DISPLAY_NAME_LENGTH } from '~/services/oauth/formatSocialProfile'
 
 export const finishProfileSchema = z.object({
-  displayName: z.string().max(MAX_DISPLAY_NAME_LENGTH, ''),
+  displayName: z
+    .string({ required_error: 'Display name is required.' })
+    .max(MAX_DISPLAY_NAME_LENGTH, ''),
   profileImage: z.object({
     url: z.string()
   }),

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

@@ -10,7 +10,8 @@ import {
 import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import {
   getHasCompletedAccount,
-  getStartedSignUpProcess
+  getStartedSignUpProcess,
+  getWelcomeModalShown
 } from 'common/store/pages/signon/selectors'
 import { useDispatch, useSelector } from 'react-redux'
 
@@ -61,14 +62,14 @@ export const RootScreen = () => {
   const accountStatus = useSelector(getAccountStatus)
   const showHomeStack = useSelector(getHasCompletedAccount)
   const startedSignUp = useSelector(getStartedSignUpProcess)
-  const [welcomeModalShown, setWelcomeModalShown] = useState(false)
+  const welcomeModalShown = useSelector(getWelcomeModalShown)
+
   const [isLoaded, setIsLoaded] = useState(false)
   const [isSplashScreenDismissed, setIsSplashScreenDismissed] = useState(false)
   const { isEnabled: isSignUpRedesignEnabled } = useFeatureFlag(
     FeatureFlags.SIGN_UP_REDESIGN
   )
   const { navigate } = useNavigation()
-
   const { onOpen: openWelcomeDrawer } = useDrawer('Welcome')
 
   useAppState(
@@ -108,7 +109,6 @@ export const RootScreen = () => {
     if (isSignUpRedesignEnabled) {
       if (showHomeStack && startedSignUp && !welcomeModalShown) {
         openWelcomeDrawer()
-        setWelcomeModalShown(true)
         // On iOS this will auto-navigate when we un-render sign up but on Android we have to navigate intentionally
         if (navigate) {
           navigate('HomeStack')

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

@@ -15,6 +15,7 @@ import { useSelector } from 'react-redux'
 
 import {
   Avatar,
+  Divider,
   Flex,
   CoverPhoto as HarmonyCoverPhoto,
   IconButton,
@@ -61,6 +62,7 @@ export const AccountHeader = (props: AccountHeaderProps) => {
         profilePicture={profilePicture}
         coverPhoto={coverPhoto}
       />
+      <Divider />
       <Flex
         direction='row'
         alignItems='flex-start'

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

@@ -4,8 +4,10 @@ import { welcomeModalMessages } from '@audius/common/messages'
 import { settingsPageActions } from '@audius/common/store'
 import { fillString } from '@audius/common/utils'
 import { css } from '@emotion/native'
+import { setWelcomeModalShown } from 'audius-client/src/common/store/pages/signon/actions'
 import { getNameField } from 'audius-client/src/common/store/pages/signon/selectors'
 import { useDispatch, useSelector } from 'react-redux'
+import { useEffectOnce } from 'react-use'
 
 import {
   Button,
@@ -31,6 +33,10 @@ export const WelcomeDrawer = () => {
   const { onClose: closeDrawer } = useDrawer('Welcome')
   const dispatch = useDispatch()
 
+  useEffectOnce(() => {
+    dispatch(setWelcomeModalShown(true))
+  })
+
   const openNotificationsDrawer = useCallback(() => {
     dispatch(requestPushNotificationPermissions())
   }, [dispatch])
@@ -65,6 +71,7 @@ export const WelcomeDrawer = () => {
             strength='strong'
             id='welcome-title'
             color='accent'
+            textAlign='center'
           >
             {fillString(
               welcomeModalMessages.welcome,
@@ -84,7 +91,10 @@ export const WelcomeDrawer = () => {
             variant='tertiary'
             onPress={() => {
               handleClose()
-              navigation.navigate('HomeStack', { screen: 'Upload' })
+              navigation.navigate('HomeStack', {
+                screen: 'App',
+                params: { screen: 'Upload' }
+              })
             }}
             fullWidth
           >

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

@@ -8,6 +8,7 @@ import { useDispatch } from 'react-redux'
 import { toFormikValidationSchema } from 'zod-formik-adapter'
 
 import { Flex } from '@audius/harmony-native'
+import { KeyboardAvoidingView } from 'app/components/core'
 import { PasswordField } from 'app/components/fields'
 import { useNavigation } from 'app/hooks/useNavigation'
 
@@ -58,27 +59,29 @@ export const CreatePasswordScreen = () => {
       validationSchema={passwordFormikSchema}
     >
       <Page>
-        <Heading
-          heading={createPasswordPageMessages.createYourPassword}
-          description={createPasswordPageMessages.description}
-        />
-        <Flex direction='column' h='100%' gap='l'>
-          <ReadOnlyField
-            label={createPasswordPageMessages.yourEmail}
-            value={email}
+        <KeyboardAvoidingView keyboardShowingOffset={220}>
+          <Heading
+            heading={createPasswordPageMessages.createYourPassword}
+            description={createPasswordPageMessages.description}
           />
-          <PasswordField
-            name='password'
-            clearErrorOnChange={false}
-            label={createPasswordPageMessages.passwordLabel}
-          />
-          <PasswordField
-            name='confirmPassword'
-            clearErrorOnChange={false}
-            label={createPasswordPageMessages.confirmPasswordLabel}
-          />
-          <PasswordCompletionChecklist />
-        </Flex>
+          <Flex direction='column' h='100%' gap='l'>
+            <ReadOnlyField
+              label={createPasswordPageMessages.yourEmail}
+              value={email}
+            />
+            <PasswordField
+              name='password'
+              clearErrorOnChange={false}
+              label={createPasswordPageMessages.passwordLabel}
+            />
+            <PasswordField
+              name='confirmPassword'
+              clearErrorOnChange={false}
+              label={createPasswordPageMessages.confirmPasswordLabel}
+            />
+            <PasswordCompletionChecklist />
+          </Flex>
+        </KeyboardAvoidingView>
         <PageFooter prefix={<SignUpAgreementText />} />
       </Page>
     </Formik>

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

@@ -9,6 +9,7 @@ import {
   getCoverPhotoField,
   getHandleField,
   getIsVerified,
+  getNameField,
   getProfileImageField
 } from 'audius-client/src/common/store/pages/signon/selectors'
 import {
@@ -18,6 +19,10 @@ import {
 } from 'common/store/pages/signon/actions'
 import { Formik, useField } from 'formik'
 import { isEmpty } from 'lodash'
+import type {
+  NativeSyntheticEvent,
+  TextInputFocusEventData
+} from 'react-native'
 import Animated, { FadeIn, FadeOut } from 'react-native-reanimated'
 import { useDispatch, useSelector } from 'react-redux'
 import { toFormikValidationSchema } from 'zod-formik-adapter'
@@ -50,6 +55,7 @@ export const FinishProfileScreen = () => {
   const { spacing } = useTheme()
   const savedProfileImage = useSelector(getProfileImageField)
   const savedCoverPhoto = useSelector(getCoverPhotoField)
+  const { value: savedDisplayName } = useSelector(getNameField) ?? {}
 
   useTrackScreen('FinishProfile')
 
@@ -66,9 +72,17 @@ export const FinishProfileScreen = () => {
   const initialValues = {
     profileImage: savedProfileImage || ({} as Image),
     coverPhoto: savedCoverPhoto || ({} as Image),
-    displayName: ''
+    displayName: savedDisplayName
   }
 
+  const saveDisplayName = useCallback(
+    (e: NativeSyntheticEvent<TextInputFocusEventData>) => {
+      const displayName = e.nativeEvent.text
+      dispatch(setValueField('name', displayName))
+    },
+    [dispatch]
+  )
+
   return (
     <Formik
       initialValues={initialValues}
@@ -88,6 +102,7 @@ export const FinishProfileScreen = () => {
             placeholder={finishProfilePageMessages.inputPlaceholder}
             maxLength={MAX_DISPLAY_NAME_LENGTH}
             autoComplete='off'
+            onChange={saveDisplayName}
             style={css({
               padding: spacing.l,
               paddingTop: spacing.unit10

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

@@ -6,17 +6,17 @@ import type { GENRES } from '@audius/common/utils'
 import type { Genre as SDKGenre } from '@audius/sdk'
 import { setField } from 'common/store/pages/signon/actions'
 import { Formik, useField } from 'formik'
-import { ScrollView } from 'react-native'
+import { ScrollView, View } from 'react-native'
 import { useDispatch } from 'react-redux'
 import { toFormikValidationSchema } from 'zod-formik-adapter'
 
-import { Box, Flex, SelectablePill } from '@audius/harmony-native'
+import { Box, Flex, Paper, SelectablePill } from '@audius/harmony-native'
 import { useNavigation } from 'app/hooks/useNavigation'
 import { make, track } from 'app/services/analytics'
 import { EventNames } from 'app/types/analytics'
 
 import { ReadOnlyAccountHeader } from '../components/AccountHeader'
-import { Heading, Page, PageFooter, gutterSize } from '../components/layout'
+import { Heading, PageFooter, gutterSize } from '../components/layout'
 import type { SignUpScreenParamList } from '../types'
 import { useTrackScreen } from '../utils/useTrackScreen'
 
@@ -66,7 +66,7 @@ const SelectGenresFieldArray = () => {
   }
 
   return (
-    <ScrollView testID='genreScrollView'>
+    <View>
       <Flex gap='s' direction='row' wrap='wrap'>
         {selectableGenres.map((genre) => (
           <MemoSelectablePill
@@ -82,7 +82,7 @@ const SelectGenresFieldArray = () => {
       </Flex>
       {/* TODO improved sticky footer and header */}
       <Box h={80} />
-    </ScrollView>
+    </View>
   )
 }
 
@@ -107,17 +107,21 @@ export const SelectGenresScreen = () => {
       validateOnChange
       validationSchema={toFormikValidationSchema(selectGenresSchema)}
     >
-      <Page noGutter>
-        <ReadOnlyAccountHeader />
-        <Flex ph={gutterSize} gap='2xl' flex={1}>
-          <Heading
-            heading={selectGenresPageMessages.header}
-            description={selectGenresPageMessages.description}
-          />
-          <SelectGenresFieldArray />
-        </Flex>
+      <View>
+        <ScrollView testID='genreScrollView'>
+          <Paper flex={1} gap='2xl'>
+            <ReadOnlyAccountHeader />
+            <Flex ph={gutterSize} gap='2xl' flex={1}>
+              <Heading
+                heading={selectGenresPageMessages.header}
+                description={selectGenresPageMessages.description}
+              />
+              <SelectGenresFieldArray />
+            </Flex>
+          </Paper>
+        </ScrollView>
         <PageFooter />
-      </Page>
+      </View>
     </Formik>
   )
 }

packages/web/src/common/store/pages/signon/actions.ts

@@ -84,6 +84,7 @@ export const SEND_WELCOME_EMAIL = 'SIGN_ON/SEND_WELCOME_EMAIL'
 
 export const FETCH_REFERRER = 'SIGN_ON/FETCH_REFERRER'
 export const SET_REFERRER = 'SIGN_ON/SET_REFERRER'
+export const SET_WELCOME_MODAL_SHOWN = 'SIGN_ON/SET_WELCOME_MODAL_SHOWN'
 
 /**
  * Sets the value for a field in the sign on state
@@ -491,6 +492,11 @@ export const setReferrer = (userId: ID) => ({
   userId
 })
 
+export const setWelcomeModalShown = (newValue: boolean) => ({
+  type: SET_WELCOME_MODAL_SHOWN,
+  value: newValue
+})
+
 /*
  * Triggers completeFollowArtists saga that determines the best way to follow artists based on
  * the potentially ongoing account creation logic

packages/web/src/common/store/pages/signon/reducer.js

@@ -39,7 +39,8 @@ import {
   SET_REFERRER,
   SET_LINKED_SOCIAL_ON_FIRST_PAGE,
   SET_FINISHED_PHASE_1,
-  HIDE_PREVIEW_HINT
+  HIDE_PREVIEW_HINT,
+  SET_WELCOME_MODAL_SHOWN
 } from './actions'
 import { Pages, FollowArtistsCategory } from './types'
 
@@ -87,7 +88,8 @@ const initialState = {
     selectedUserIds: []
   },
   genres: [],
-  referrer: null
+  referrer: null,
+  welcomeModalShown: false
 }
 
 const actionsMap = {
@@ -104,7 +106,8 @@ const actionsMap = {
       // even if toggling b/w sign up and sign in redirects to the right place
       routeOnCompletion: state.routeOnCompletion,
       routeOnExit: state.routeOnExit,
-      isMobileSignOnVisible: state.isMobileSignOnVisible
+      isMobileSignOnVisible: state.isMobileSignOnVisible,
+      welcomeModalShown: false
     }
   },
   [OPEN_SIGN_ON](state, action) {
@@ -479,6 +482,12 @@ const actionsMap = {
       ...state,
       hidePreviewHint: true
     }
+  },
+  [SET_WELCOME_MODAL_SHOWN](state, action) {
+    return {
+      ...state,
+      welcomeModalShown: action.value
+    }
   }
 }
 

packages/web/src/common/store/pages/signon/selectors.ts

@@ -71,6 +71,9 @@ export const getHasCompletedAccount = createSelector(
   }
 )
 
+export const getWelcomeModalShown = (state: AppState) =>
+  state.signOn.welcomeModalShown
+
 /**
  * Each lineup that invokes this selector should pass its own selector as an argument, e.g.
  *   const getLineupMetadatas = makeGetLineupMetadatas(ownProps.lineupSelector)

packages/web/src/common/store/pages/signon/types.ts

@@ -76,6 +76,7 @@ export default interface SignOnPageState {
   routeOnExit: boolean
   page: number
   referrer: ID
+  welcomeModalShown: boolean
 }
 
 export type { SignOnPageState }