Ensure captcha verification code gets submitted in signup request (#5010

)

Co-authored-by: Eric Bailey <[email protected]>
(cherry picked from commit 16d556c)

src/screens/Signup/StepCaptcha/index.tsx

@@ -41,10 +41,9 @@ export function StepCaptcha() {
     (code: string) => {
       setCompleted(true)
       logEvent('signup:captchaSuccess', {})
-      const submitTask = {code, mutableProcessed: false}
       dispatch({
         type: 'submit',
-        task: submitTask,
+        task: {verificationCode: code, mutableProcessed: false},
       })
     },
     [dispatch],

src/screens/Signup/StepHandle.tsx

@@ -65,8 +65,10 @@ export function StepHandle() {
     })
     // phoneVerificationRequired is actually whether a captcha is required
     if (!state.serviceDescription?.phoneVerificationRequired) {
-      const submitTask = {code: undefined, mutableProcessed: false}
-      dispatch({type: 'submit', task: submitTask})
+      dispatch({
+        type: 'submit',
+        task: {verificationCode: undefined, mutableProcessed: false},
+      })
       return
     }
     dispatch({type: 'next'})

src/screens/Signup/state.ts

@@ -27,7 +27,7 @@ export enum SignupStep {
 }
 
 type SubmitTask = {
-  code: string | undefined
+  verificationCode: string | undefined
   mutableProcessed: boolean // OK to mutate assuming it's never read in render.
 }
 
@@ -62,7 +62,6 @@ export type SignupAction =
   | {type: 'setDateOfBirth'; value: Date}
   | {type: 'setInviteCode'; value: string}
   | {type: 'setHandle'; value: string}
-  | {type: 'setVerificationCode'; value: string}
   | {type: 'setError'; value: string}
   | {type: 'setIsLoading'; value: boolean}
   | {type: 'submit'; task: SubmitTask}
@@ -189,11 +188,7 @@ export function useSubmitSignup() {
   const onboardingDispatch = useOnboardingDispatch()
 
   return useCallback(
-    async (
-      state: SignupState,
-      dispatch: (action: SignupAction) => void,
-      verificationCode?: string,
-    ) => {
+    async (state: SignupState, dispatch: (action: SignupAction) => void) => {
       if (!state.email) {
         dispatch({type: 'setStep', value: SignupStep.INFO})
         return dispatch({
@@ -224,7 +219,7 @@ export function useSubmitSignup() {
       }
       if (
         state.serviceDescription?.phoneVerificationRequired &&
-        !verificationCode
+        !state.pendingSubmit?.verificationCode
       ) {
         dispatch({type: 'setStep', value: SignupStep.CAPTCHA})
         logger.error('Signup Flow Error', {
@@ -247,7 +242,7 @@ export function useSubmitSignup() {
           password: state.password,
           birthDate: state.dateOfBirth,
           inviteCode: state.inviteCode.trim(),
-          verificationCode: verificationCode,
+          verificationCode: state.pendingSubmit?.verificationCode,
         })
         /*
          * Must happen last so that if the user has multiple tabs open and