Native Sign Up Various QA Fixes (#7607)

AudiusProject · Feb 16, 2024 · f8232bb · f8232bb
1 parent 336bab2
commit f8232bb
Show file tree

Hide file tree

Showing 9 changed files with 78 additions and 67 deletions.
diff --git a/packages/mobile/src/components/fields/PasswordField.tsx b/packages/mobile/src/components/fields/PasswordField.tsx
@@ -22,7 +22,6 @@ export const PasswordField = (props: PasswordFieldProps) => {
     <PasswordInput
       {...field}
       error={hasError}
-      helperText={hasError ? error : undefined}
       onChangeText={(e) => {
         if (clearErrorOnChange) {
           setError(undefined)

diff --git a/packages/mobile/src/harmony-native/components/CoverPhoto/CoverPhoto.tsx b/packages/mobile/src/harmony-native/components/CoverPhoto/CoverPhoto.tsx
@@ -17,9 +17,11 @@ import type { CornerRadiusOptions } from '@audius/harmony-native'
 
 import { useTheme } from '../../foundations/theme'
 
+type CoverPhotoImage = Image | ImageSourcePropType | null | undefined
+
 export type CoverPhotoProps = {
-  profilePicture?: Image | ImageSourcePropType | null | undefined
-  coverPhoto?: Image | ImageSourcePropType | null | undefined
+  profilePicture?: CoverPhotoImage
+  coverPhoto?: CoverPhotoImage
   style?: StyleProp<ImageStyle>
   children?: ReactNode
   topCornerRadius?: CornerRadiusOptions
@@ -51,20 +53,38 @@ export const CoverPhoto = (props: CoverPhotoProps) => {
   const fullHeightStyle = css({ height: '100%' })
 
   const getSource = () => {
-    // Having .url means its a useable image source
-    if (coverPhoto && !isEmpty(coverPhoto)) {
-      return { source: coverPhoto }
+    let source: Exclude<CoverPhotoImage, number> = {
+      uri: undefined
+    }
+    let usingProfilePicture = false
+    if (typeof source === 'number') {
+      return { source, usingProfilePicture }
     }
     if (profilePicture && !isEmpty(profilePicture)) {
-      return { source: profilePicture, usingProfilePicture: true }
+      source = profilePicture as Exclude<CoverPhotoImage, number>
+      usingProfilePicture = true
+    }
+    if (coverPhoto && !isEmpty(coverPhoto)) {
+      source = coverPhoto as Exclude<CoverPhotoImage, number>
+      usingProfilePicture = false
+    }
+
+    // Android upload format does not quite match the expected format, so we have to drill into 'file' to workaround for android
+    if (source && 'file' in source && !('uri' in source)) {
+      return { source: source.file, usingProfilePicture }
+    } else {
+      return { source, usingProfilePicture }
     }
-    return { source: { uri: undefined } }
   }
 
   const { source, usingProfilePicture } = getSource()
 
   return (
-    <ImageBackground source={source} style={[rootStyle, style]} {...other}>
+    <ImageBackground
+      source={source as ImageSourcePropType}
+      style={[rootStyle, style]}
+      {...other}
+    >
       {!profilePicture && !coverPhoto ? (
         <LinearGradient
           colors={['rgba(0, 0, 0, 0.20)', 'rgba(0, 0, 0, 0.00)']}

diff --git a/packages/mobile/src/harmony-native/components/input/TextInput/TextInput.tsx b/packages/mobile/src/harmony-native/components/input/TextInput/TextInput.tsx
@@ -306,15 +306,9 @@ export const TextInput = forwardRef(
                     direction='row'
                     alignItems='center'
                     justifyContent='space-between'
-                    gap='2xs'
                   >
                     {startAdornmentText && shouldShowAdornments ? (
-                      <Text
-                        variant='label'
-                        size='l'
-                        color='subdued'
-                        style={css({ lineHeight: 0 })}
-                      >
+                      <Text variant='title' size='l' color='subdued'>
                         {startAdornmentText}
                       </Text>
                     ) : null}
@@ -352,12 +346,7 @@ export const TextInput = forwardRef(
                       {...other}
                     />
                     {endAdornmentText && shouldShowAdornments ? (
-                      <Text
-                        variant='label'
-                        size='l'
-                        color='subdued'
-                        style={css({ lineHeight: 0 })}
-                      >
+                      <Text variant='label' size='l' color='subdued'>
                         {endAdornmentText}
                       </Text>
                     ) : null}

diff --git a/packages/mobile/src/screens/root-screen/RootScreen.tsx b/packages/mobile/src/screens/root-screen/RootScreen.tsx
@@ -16,6 +16,7 @@ import { useDispatch, useSelector } from 'react-redux'
 
 import useAppState from 'app/hooks/useAppState'
 import { useDrawer } from 'app/hooks/useDrawer'
+import { useNavigation } from 'app/hooks/useNavigation'
 import { useFeatureFlag } from 'app/hooks/useRemoteConfig'
 import { useUpdateRequired } from 'app/hooks/useUpdateRequired'
 import { useSyncCodePush } from 'app/screens/root-screen/useSyncCodePush'
@@ -66,6 +67,7 @@ export const RootScreen = () => {
   const { isEnabled: isSignUpRedesignEnabled } = useFeatureFlag(
     FeatureFlags.SIGN_UP_REDESIGN
   )
+  const { navigate } = useNavigation()
 
   const { onOpen: openWelcomeDrawer } = useDrawer('Welcome')
 
@@ -107,14 +109,19 @@ export const RootScreen = () => {
       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')
+        }
       }
     }
   }, [
     isSignUpRedesignEnabled,
     openWelcomeDrawer,
     showHomeStack,
     startedSignUp,
-    welcomeModalShown
+    welcomeModalShown,
+    navigate
   ])
 
   return (

diff --git a/packages/mobile/src/screens/sign-on-screen/components/layout.tsx b/packages/mobile/src/screens/sign-on-screen/components/layout.tsx
@@ -47,6 +47,8 @@ export const Page = (props: PageProps) => {
       style={[
         css({
           zIndex: 1,
+          minHeight:
+            Dimensions.get('window').height - insets.top - insets.bottom,
           paddingBottom: insets.bottom
         }),
         style

diff --git a/packages/mobile/src/screens/sign-on-screen/screens/CreatePasswordScreen.tsx b/packages/mobile/src/screens/sign-on-screen/screens/CreatePasswordScreen.tsx
@@ -1,4 +1,4 @@
-import { useCallback, useState } from 'react'
+import { useCallback } from 'react'
 
 import { createPasswordPageMessages } from '@audius/common/messages'
 import { passwordSchema } from '@audius/common/schemas'
@@ -8,7 +8,6 @@ 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'
 
@@ -49,50 +48,36 @@ export const CreatePasswordScreen = () => {
     [dispatch, navigation]
   )
 
-  const [keyboardOffset, setKeyboardOffset] = useState(0)
-
   return (
     <Formik
       initialValues={initialValues}
       onSubmit={handleSubmit}
       validationSchema={passwordFormikSchema}
     >
-      <KeyboardAvoidingView
-        keyboardShowingOffset={keyboardOffset - 32}
-        style={{ overflow: 'hidden' }}
-      >
-        <Page>
-          <Heading
-            heading={createPasswordPageMessages.createYourPassword}
-            description={createPasswordPageMessages.description}
+      <Page>
+        <Heading
+          heading={createPasswordPageMessages.createYourPassword}
+          description={createPasswordPageMessages.description}
+        />
+        <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}
           />
-          <Flex
-            direction='column'
-            h='100%'
-            gap='l'
-            onLayout={(e) => {
-              e.currentTarget.measureInWindow((x, y, w, h) => {
-                setKeyboardOffset(y)
-              })
-            }}
-          >
-            <ReadOnlyField
-              label={createPasswordPageMessages.yourEmail}
-              value={email}
-            />
-            <PasswordField
-              name='password'
-              label={createPasswordPageMessages.passwordLabel}
-            />
-            <PasswordField
-              name='confirmPassword'
-              label={createPasswordPageMessages.confirmPasswordLabel}
-            />
-            <PasswordCompletionChecklist />
-          </Flex>
-          <PageFooter prefix={<SignUpAgreementText />} />
-        </Page>
-      </KeyboardAvoidingView>
+          <PasswordCompletionChecklist />
+        </Flex>
+        <PageFooter prefix={<SignUpAgreementText />} />
+      </Page>
     </Formik>
   )
 }
diff --git a/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/FollowArtistCard.tsx b/packages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/FollowArtistCard.tsx
@@ -160,7 +160,7 @@ export const FollowArtistCard = (props: FollowArtistCardProps) => {
         </Pressable>
       </Flex>
       <Flex pt='unit12' ph='s' pb='l' alignItems='center' gap='l'>
-        <Flex gap='s'>
+        <Flex gap='s' alignItems='center'>
           <UserDisplayName userId={user_id} />
           <Flex direction='row' gap='s' alignItems='center'>
             <Flex direction='row' gap='xs' alignItems='center'>

diff --git a/...ages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/SelectArtistsScreen.tsx b/...ages/mobile/src/screens/sign-on-screen/screens/SelectArtistScreen/SelectArtistsScreen.tsx
@@ -1,7 +1,11 @@
 import { useCallback } from 'react'
 
 import { selectArtistsPageMessages } from '@audius/common/messages'
-import { finishSignUp } from 'audius-client/src/common/store/pages/signon/actions'
+import {
+  addFollowArtists,
+  finishSignUp,
+  completeFollowArtists
+} from 'audius-client/src/common/store/pages/signon/actions'
 import { EditingStatus } from 'audius-client/src/common/store/pages/signon/types'
 import {
   getFollowIds,
@@ -55,12 +59,15 @@ export const SelectArtistsScreen = () => {
   )
 
   const handleSubmit = useCallback(() => {
+    // Follow selected artists
+    dispatch(addFollowArtists(selectedArtists))
+    dispatch(completeFollowArtists())
     // This call is what eventually triggers the RootScreen to redirect to the home page (via conditional rendering)
     dispatch(finishSignUp())
     if (accountCreationStatus === EditingStatus.LOADING) {
       navigation.navigate('AccountLoading')
     }
-  }, [accountCreationStatus, dispatch, navigation])
+  }, [accountCreationStatus, dispatch, navigation, selectedArtists])
 
   return (
     <SelectArtistsPreviewContextProvider>

diff --git a/packages/web/src/common/store/pages/signon/sagas.ts b/packages/web/src/common/store/pages/signon/sagas.ts
@@ -514,8 +514,10 @@ function* signUp() {
           FeatureFlags.SIGN_UP_REDESIGN
         )
 
-        if (isNativeMobile && !isSignUpRedesignEnabled) {
-          yield* put(requestPushNotificationPermissions())
+        if (isNativeMobile) {
+          if (!isSignUpRedesignEnabled) {
+            yield* put(requestPushNotificationPermissions())
+          }
         } else {
           // Set the has request browser permission to true as the signon provider will open it
           setHasRequestedBrowserPermission()