[C-5492] Guest sign-up copy and improvements

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

@@ -17,7 +17,8 @@ export const confirmEmailMessages = {
   otpPlaceholder: '123 456',
   noEmailNotice: "Didn't get an email?",
   resendCode: 'Resend Code',
-  resentToast: 'Verification code resent.'
+  resentToast: 'Verification code resent.',
+  finishSigningUp: 'Finish Signing Up'
 }
 
 export const createEmailPageMessages = {
@@ -30,7 +31,8 @@ export const createEmailPageMessages = {
   unknownError: 'Unknown error occurred.',
   metaMaskNotRecommended: 'Signing up with MetaMask is not recommended.',
   signUpMetamask: 'Sign Up With MetaMask',
-  learnMore: 'Learn More'
+  learnMore: 'Learn More',
+  finishSigningUp: 'Finish Signing Up'
 }
 
 export type CompletionChecklistType =

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

@@ -9,12 +9,10 @@ export const emailSchemaMessages = {
   invalidEmail: 'Please enter a valid email.',
   emailInUse: 'Email already taken.',
   somethingWentWrong: 'Something went wrong. Try again later.',
-  completeYourProfile: 'Complete your profile.'
+  guestAccountExists: 'Guest account exists.'
 }
 
-export const emailSchema = <T extends AudiusQueryContextType>(
-  queryContext: T
-) =>
+export const emailSchema = (queryContext: AudiusQueryContextType) =>
   z.object({
     email: z
       .string({ required_error: emailSchemaMessages.emailRequired })
@@ -31,7 +29,7 @@ export const emailSchema = <T extends AudiusQueryContextType>(
           // complete guest accounts only
           ctx.addIssue({
             code: z.ZodIssueCode.custom,
-            message: emailSchemaMessages.completeYourProfile
+            message: emailSchemaMessages.guestAccountExists
           })
           return true
         } else if (isEmailInUse) {

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

@@ -1,21 +1,40 @@
 import { z } from 'zod'
 
+import { signUpFetch } from '~/api'
+import { AudiusQueryContextType } from '~/audius-query'
+
 export const messages = {
   emailRequired: 'Please enter an email.',
   email: 'Please enter a valid email.',
   passwordRequired: 'Please enter a password.',
-  invalidCredentials: 'Invalid credentials.'
+  invalidCredentials: 'Invalid credentials.',
+  guestAccountExists: 'Guest account exists.'
 }
 
-export const signInSchema = z.object({
-  email: z
-    .string({
-      required_error: messages.emailRequired
+export const signInSchema = (queryContext: AudiusQueryContextType) =>
+  z.object({
+    email: z
+      .string({
+        required_error: messages.emailRequired
+      })
+      .email(messages.email)
+      .superRefine(async (email, ctx) => {
+        const { isGuest } = await signUpFetch.isEmailInUse(
+          { email },
+          queryContext
+        )
+        if (isGuest) {
+          ctx.addIssue({
+            code: z.ZodIssueCode.custom,
+            message: messages.guestAccountExists
+          })
+          return true
+        }
+        return z.NEVER // The return value is not used, but we need to return something to satisfy the typing
+      }),
+    password: z.string({
+      required_error: messages.passwordRequired
     })
-    .email(messages.email),
-  password: z.string({
-    required_error: messages.passwordRequired
   })
-})
 
 export { messages as signInErrorMessages }

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

@@ -36,7 +36,7 @@ export const NewEmailField = (props: NewEmailFieldProps) => {
   const [{ value: email }, { error }] = useField(name)
   const { isValidating } = useFormikContext()
   const emailInUse = error === emailSchemaMessages.emailInUse
-  const isGuest = error === emailSchemaMessages.completeYourProfile
+  const isGuest = error === emailSchemaMessages.guestAccountExists
   const hasError = emailInUse || isGuest
 
   // Track which specific error was shown last
@@ -55,7 +55,7 @@ export const NewEmailField = (props: NewEmailFieldProps) => {
 
   const showGuestError =
     isGuest ||
-    (isValidating && lastShownError === emailSchemaMessages.completeYourProfile)
+    (isValidating && lastShownError === emailSchemaMessages.guestAccountExists)
 
   const showEmailInUseError =
     emailInUse ||
@@ -70,7 +70,7 @@ export const NewEmailField = (props: NewEmailFieldProps) => {
       />
       {showGuestError ? (
         <Hint icon={IconError}>
-          {emailSchemaMessages.completeYourProfile}{' '}
+          {emailSchemaMessages.guestAccountExists}{' '}
           <TextLink variant='visible' onPress={handlePressConfirmEmail}>
             {confirmEmailMessages.title}
           </TextLink>

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

@@ -1,6 +1,6 @@
 import { useCallback, useEffect, useState } from 'react'
 
-import { confirmEmailMessages } from '@audius/common/messages'
+import { confirmEmailMessages as messages } from '@audius/common/messages'
 import {
   confirmEmailSchema,
   formatOtp,
@@ -10,7 +10,8 @@ import { setValueField, signIn } from 'common/store/pages/signon/actions'
 import {
   getEmailField,
   getOtpField,
-  getPasswordField
+  getPasswordField,
+  getIsGuest
 } from 'common/store/pages/signon/selectors'
 import { Formik, useField } from 'formik'
 import { useDispatch, useSelector } from 'react-redux'
@@ -39,6 +40,7 @@ export const ConfirmEmailScreen = () => {
   const { value: email } = useSelector(getEmailField)
   const { value: password } = useSelector(getPasswordField)
   const { value: otp } = useSelector(getOtpField)
+  const isGuest = useSelector(getIsGuest)
   const isSubmitting = !!otp
 
   useTrackScreen('ConfirmEmail')
@@ -62,12 +64,12 @@ export const ConfirmEmailScreen = () => {
     >
       <Page>
         <Heading
-          heading={confirmEmailMessages.title}
-          description={confirmEmailMessages.description}
+          heading={isGuest ? messages.finishSigningUp : messages.title}
+          description={messages.description}
         />
         <VerificationCodeField />
         <Text variant='body'>
-          {confirmEmailMessages.noEmailNotice} <ResendCodeLink />
+          {messages.noEmailNotice} <ResendCodeLink />
         </Text>
         <PageFooter
           shadow='flat'
@@ -97,8 +99,8 @@ const VerificationCodeField = () => {
     <HarmonyTextField
       name='otp'
       keyboardType='number-pad'
-      label={confirmEmailMessages.otpLabel}
-      placeholder={confirmEmailMessages.otpPlaceholder}
+      label={messages.otpLabel}
+      placeholder={messages.otpPlaceholder}
       transformValueOnChange={formatOtp}
     />
   )
@@ -113,7 +115,7 @@ const ResendCodeLink = () => {
 
   const handleClick = useCallback(() => {
     dispatch(signIn(email, password))
-    toast({ content: confirmEmailMessages.resentToast })
+    toast({ content: messages.resentToast })
     setHasResendCode(true)
   }, [dispatch, email, password, toast])
 
@@ -123,7 +125,7 @@ const ResendCodeLink = () => {
       onPress={handleClick}
       disabled={hasResentCode}
     >
-      {confirmEmailMessages.resendCode}
+      {messages.resendCode}
     </TextLink>
   )
 }

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

@@ -1,6 +1,6 @@
 import { useCallback } from 'react'
 
-import { createPasswordPageMessages } from '@audius/common/messages'
+import { createPasswordPageMessages as messages } from '@audius/common/messages'
 import { passwordSchema } from '@audius/common/schemas'
 import { setValueField } from 'common/store/pages/signon/actions'
 import { getEmailField } from 'common/store/pages/signon/selectors'
@@ -58,22 +58,20 @@ export const CreatePasswordScreen = () => {
           <KeyboardAvoidingView keyboardShowingOffset={220}>
             <Flex direction='column' h='100%' gap='l'>
               <Heading
-                heading={createPasswordPageMessages.createYourPassword}
-                description={createPasswordPageMessages.description}
-              />
-              <ReadOnlyField
-                label={createPasswordPageMessages.yourEmail}
-                value={email}
+                heading={messages.createYourPassword}
+                description={messages.description}
               />
+
+              <ReadOnlyField label={messages.yourEmail} value={email} />
               <PasswordField
                 name='password'
                 clearErrorOnChange={false}
-                label={createPasswordPageMessages.passwordLabel}
+                label={messages.passwordLabel}
               />
               <PasswordField
                 name='confirmPassword'
                 clearErrorOnChange={false}
-                label={createPasswordPageMessages.confirmPasswordLabel}
+                label={messages.confirmPasswordLabel}
               />
               <PasswordCompletionChecklist />
               <SignUpAgreementText />

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

@@ -1,5 +1,6 @@
-import { useCallback, useEffect } from 'react'
+import { useCallback, useEffect, useMemo } from 'react'
 
+import { useAudiusQueryContext } from '@audius/common/audius-query'
 import { signInPageMessages } from '@audius/common/messages'
 import { signInSchema, signInErrorMessages } from '@audius/common/schemas'
 import {
@@ -24,8 +25,6 @@ import { Heading } from '../components/layout'
 import type { SignUpScreenParamList } from '../types'
 import { useTrackScreen } from '../utils/useTrackScreen'
 
-const SignInSchema = toFormikValidationSchema(signInSchema)
-
 type SignInValues = {
   email: string
   password: string
@@ -41,6 +40,12 @@ export const SignInScreen = () => {
   const navigation = useNavigation<SignUpScreenParamList>()
   useTrackScreen('SignIn')
 
+  const audiusQueryContext = useAudiusQueryContext()
+  const SignInSchema = useMemo(
+    () => toFormikValidationSchema(signInSchema(audiusQueryContext)),
+    [audiusQueryContext]
+  )
+
   useEffect(() => {
     if (requiresOtp) {
       navigation.navigate('ConfirmEmail')

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

@@ -1079,8 +1079,9 @@ function* signIn(action: ReturnType<typeof signOnActions.signIn>) {
             }
           })
         )
+
+        yield* put(toastActions.toast({ content: messages.incompleteAccount }))
       }
-      yield* put(toastActions.toast({ content: messages.incompleteAccount }))
 
       yield* put(
         make(Name.SIGN_IN_WITH_INCOMPLETE_ACCOUNT, {

packages/web/src/pages/sign-in-page/ConfirmEmailPage.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useContext, useEffect, useState } from 'react'
 
-import { confirmEmailMessages } from '@audius/common/messages'
+import { confirmEmailMessages as messages } from '@audius/common/messages'
 import {
   confirmEmailSchema,
   formatOtp,
@@ -19,7 +19,8 @@ import {
 import {
   getEmailField,
   getOtpField,
-  getPasswordField
+  getPasswordField,
+  getIsGuest
 } from 'common/store/pages/signon/selectors'
 import { HarmonyTextField } from 'components/form-fields/HarmonyTextField'
 import { ToastContext } from 'components/toast/ToastContext'
@@ -43,6 +44,7 @@ export const ConfirmEmailPage = () => {
   const { value: email } = useSelector(getEmailField)
   const { value: password } = useSelector(getPasswordField)
   const { value: otp } = useSelector(getOtpField)
+  const isGuest = useSelector(getIsGuest)
   const isSubmitting = !!otp
 
   const handleSubmit = useCallback(
@@ -65,12 +67,12 @@ export const ConfirmEmailPage = () => {
     >
       <Page as={Form} transition={isMobile ? undefined : 'horizontal'}>
         <Heading
-          heading={confirmEmailMessages.title}
-          description={confirmEmailMessages.description}
+          heading={isGuest ? messages.finishSigningUp : messages.title}
+          description={messages.description}
         />
         <VerificationCodeField />
         <Text variant='body'>
-          {confirmEmailMessages.noEmailNotice} <ResendCodeLink />
+          {messages.noEmailNotice} <ResendCodeLink />
         </Text>
         <PageFooter shadow='flat' buttonProps={{ isLoading: isSubmitting }} />
       </Page>
@@ -95,8 +97,8 @@ const VerificationCodeField = () => {
   return (
     <HarmonyTextField
       name='otp'
-      label={confirmEmailMessages.otpLabel}
-      placeholder={confirmEmailMessages.otpPlaceholder}
+      label={messages.otpLabel}
+      placeholder={messages.otpPlaceholder}
       transformValueOnChange={formatOtp}
     />
   )
@@ -111,7 +113,7 @@ const ResendCodeLink = () => {
 
   const handleClick = useCallback(() => {
     dispatch(signIn(email, password))
-    toast(confirmEmailMessages.resentToast)
+    toast(messages.resentToast)
     setHasResendCode(true)
   }, [dispatch, email, password, toast])
 
@@ -121,7 +123,7 @@ const ResendCodeLink = () => {
       onClick={handleClick}
       disabled={hasResentCode}
     >
-      {confirmEmailMessages.resendCode}
+      {messages.resendCode}
     </TextLink>
   )
 }

packages/web/src/pages/sign-in-page/SignInPage.tsx

@@ -1,5 +1,6 @@
-import { useCallback, useEffect, useState } from 'react'
+import { useCallback, useEffect, useMemo, useState } from 'react'
 
+import { useAudiusQueryContext } from '@audius/common/audius-query'
 import { signInPageMessages } from '@audius/common/messages'
 import { signInSchema, signInErrorMessages } from '@audius/common/schemas'
 import { route } from '@audius/common/utils'
@@ -29,6 +30,7 @@ import { HarmonyPasswordField } from 'components/form-fields/HarmonyPasswordFiel
 import PreloadImage from 'components/preload-image/PreloadImage'
 import { useMedia } from 'hooks/useMedia'
 import { useNavigateToPage } from 'hooks/useNavigateToPage'
+import { GuestEmailHint } from 'pages/sign-on-page/GuestEmailHint'
 import { EmailField } from 'pages/sign-up-page/components/EmailField'
 import { ForgotPasswordModal } from 'pages/sign-up-page/components/ForgotPasswordModal'
 import { Heading, ScrollView } from 'pages/sign-up-page/components/layout'
@@ -38,8 +40,6 @@ import { SignInWithMetaMaskButton } from './SignInWithMetaMaskButton'
 
 const { SIGN_IN_CONFIRM_EMAIL_PAGE, SIGN_UP_PAGE } = route
 
-const SignInSchema = toFormikValidationSchema(signInSchema)
-
 const smallDesktopWindowHeight = 900
 
 type SignInValues = {
@@ -58,6 +58,12 @@ export const SignInPage = () => {
   const { value: existingPassword } = useSelector(getPasswordField)
   const requiresOtp = useSelector(getRequiresOtp)
 
+  const audiusQueryContext = useAudiusQueryContext()
+  const SignInSchema = useMemo(
+    () => toFormikValidationSchema(signInSchema(audiusQueryContext)),
+    [audiusQueryContext]
+  )
+
   useEffect(() => {
     if (requiresOtp) {
       navigate(SIGN_IN_CONFIRM_EMAIL_PAGE)
@@ -124,6 +130,7 @@ export const SignInPage = () => {
             <Flex direction='column' gap='l'>
               <EmailField />
               <SignInPasswordField />
+              <GuestEmailHint />
             </Flex>
             <Flex direction='column' gap='l' w='100%'>
               <Button