chore(runway): cherry-pick fix(card): cp-7.60.0 debounced inputs on onboarding flow (#22747)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR fixes a race condition bug in the onboarding flow where users
typing quickly and immediately pressing submit buttons would have their
input data lost due to debounce delays.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Fixed a bug where rapidly typing in Card onboarding
forms and immediately submitting could send incomplete data to the
server

## **Related issues**

Fixes:

## **Manual testing steps**

```gherkin
Feature: Onboarding form submission with rapid typing

  Scenario: user types email rapidly and submits immediately in Sign Up screen
    Given user is on the Sign Up screen
    And all form fields are empty

    When user rapidly types "test@example.com" in email field
    And user rapidly types "Password123!" in password field
    And user rapidly types "Password123!" in confirm password field
    And user selects a country
    And user immediately presses Continue button (within 1 second)
    Then the API should receive "test@example.com" (not partial/stale email)
    And user should navigate to Confirm Email screen

  Scenario: user types phone number rapidly and submits immediately in Set Phone Number screen
    Given user is on the Set Phone Number screen
    And country code is selected

    When user rapidly types "1234567890" in phone number field
    And user immediately presses Continue button (within 1 second)
    Then the API should receive "1234567890" (not partial phone number)
    And user should navigate to Confirm Phone Number screen

  Scenario: US user types SSN rapidly and submits immediately in Personal Details screen
    Given user is on the Personal Details screen
    And user has selected US as country
    And first name, last name, date of birth, and nationality are filled

    When user rapidly types "123456789" (9 digits) in SSN field
    And user immediately presses Continue button (within 1 second)
    Then the API should receive "123456789" (complete SSN, not partial)
    And user should navigate to Physical Address screen

  Scenario: user submits invalid data with rapid typing
    Given user is on the Sign Up screen

    When user rapidly types "invalid-email" in email field
    And user rapidly types "weak" in password field
    And user rapidly types "weak" in confirm password field
    And user selects a country
    And user immediately presses Continue button
    Then validation errors should be shown
    And API should not be called
    And user should remain on Sign Up screen
```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Use non-debounced field values for validation/submission in onboarding
forms and switch consent `policyType` from `US` to `us`.
> 
> - **Onboarding UI (validation/submission)**:
> - Sign Up (`SignUp.tsx`): validate/submit using live `email`,
`password`, `confirmPassword`; update `isDisabled`; send current values
to API; tweak handlers.
> - Set Phone Number (`SetPhoneNumber.tsx`): validate `phoneNumber`
(4–15 digits) before submit; compute `isDisabled` from current value;
pass live number to API/navigation; adjust error handling.
> - Personal Details (`PersonalDetails.tsx`): require and validate `SSN`
(9 digits) for US before submit; compute `isDisabled` using live `SSN`;
send current `ssn` to API.
> - **Consent policy casing**:
> - Change consent `policyType` from `US` to `us` across code, tests,
and types (`useRegisterUserConsent.ts`,
`useRegisterUserConsent.test.ts`, `CardSDK.test.ts`, `types.ts`).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
b039631. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: Brunonascdev

app/components/UI/Card/components/Onboarding/PersonalDetails.tsx

@@ -172,11 +172,20 @@ const PersonalDetails = () => {
       !lastName ||
       !dateOfBirth ||
       !nationality ||
-      (!debouncedSSN && selectedCountry === 'US')
+      (!SSN && selectedCountry === 'US')
     ) {
       return;
     }
 
+    // Validate SSN before submitting if it's a US user
+    if (selectedCountry === 'US') {
+      const isSSNValid = /^\d{9}$/.test(SSN);
+      if (!isSSNValid) {
+        setIsSSNError(true);
+        return;
+      }
+    }
+
     try {
       trackEvent(
         createEventBuilder(MetaMetricsEvents.CARD_BUTTON_CLICKED)
@@ -192,7 +201,7 @@ const PersonalDetails = () => {
         lastName,
         dateOfBirth: formatDateOfBirth(dateOfBirth),
         countryOfNationality: nationality,
-        ssn: debouncedSSN,
+        ssn: SSN,
       });
 
       if (user) {
@@ -223,32 +232,35 @@ const PersonalDetails = () => {
     );
   }, [trackEvent, createEventBuilder]);
 
-  const isDisabled = useMemo(
-    () =>
+  const isDisabled = useMemo(() => {
+    // Check the actual SSN value, not the debounced one
+    const isSSNValid =
+      SSN && selectedCountry === 'US' ? /^\d{9}$/.test(SSN) : true;
+
+    return (
       registerLoading ||
       registerIsError ||
       !firstName ||
       !lastName ||
       !dateOfBirth ||
       !nationality ||
-      (!debouncedSSN && selectedCountry === 'US') ||
-      isSSNError ||
+      (!SSN && selectedCountry === 'US') ||
+      !isSSNValid ||
       !!dateError ||
-      !onboardingId,
-    [
-      registerLoading,
-      registerIsError,
-      firstName,
-      lastName,
-      dateOfBirth,
-      nationality,
-      debouncedSSN,
-      selectedCountry,
-      isSSNError,
-      dateError,
-      onboardingId,
-    ],
-  );
+      !onboardingId
+    );
+  }, [
+    registerLoading,
+    registerIsError,
+    firstName,
+    lastName,
+    dateOfBirth,
+    nationality,
+    SSN,
+    selectedCountry,
+    dateError,
+    onboardingId,
+  ]);
 
   const renderFormFields = () => (
     <>

app/components/UI/Card/components/Onboarding/SetPhoneNumber.tsx

@@ -84,11 +84,13 @@ const SetPhoneNumber = () => {
   }, [trackEvent, createEventBuilder]);
 
   const handleContinue = async () => {
-    if (
-      !debouncedPhoneNumber ||
-      !selectedCountryAreaCode ||
-      !contactVerificationId
-    ) {
+    if (!phoneNumber || !selectedCountryAreaCode || !contactVerificationId) {
+      return;
+    }
+
+    const isCurrentPhoneNumberValid = /^\d{4,15}$/.test(phoneNumber);
+    if (!isCurrentPhoneNumberValid) {
+      setIsPhoneNumberError(true);
       return;
     }
 
@@ -103,21 +105,21 @@ const SetPhoneNumber = () => {
       );
       const { success } = await sendPhoneVerification({
         phoneCountryCode: selectedCountryAreaCode,
-        phoneNumber: debouncedPhoneNumber,
+        phoneNumber,
         contactVerificationId,
       });
+
       if (success) {
         navigation.navigate(Routes.CARD.ONBOARDING.CONFIRM_PHONE_NUMBER, {
           phoneCountryCode: selectedCountryAreaCode,
-          phoneNumber: debouncedPhoneNumber,
+          phoneNumber,
         });
       }
-    } catch (error) {
+    } catch (err: unknown) {
       if (
-        error instanceof CardError &&
-        error.message.includes('Invalid or expired contact verification ID')
+        err instanceof CardError &&
+        err.message.includes('Invalid or expired contact verification ID')
       ) {
-        // navigate back and restart the flow
         dispatch(resetOnboardingState());
         navigation.navigate(Routes.CARD.ONBOARDING.SIGN_UP);
       }
@@ -141,29 +143,29 @@ const SetPhoneNumber = () => {
       return;
     }
 
-    setIsPhoneNumberError(
-      // 4-15 digits
-      !/^\d{4,15}$/.test(debouncedPhoneNumber),
-    );
+    setIsPhoneNumberError(!/^\d{4,15}$/.test(debouncedPhoneNumber));
   }, [debouncedPhoneNumber]);
 
-  const isDisabled = useMemo(
-    () =>
-      !debouncedPhoneNumber ||
+  const isDisabled = useMemo(() => {
+    const isCurrentPhoneNumberValid = phoneNumber
+      ? /^\d{4,15}$/.test(phoneNumber)
+      : false;
+
+    return (
+      !phoneNumber ||
       !selectedCountryAreaCode ||
       !contactVerificationId ||
-      isPhoneNumberError ||
+      !isCurrentPhoneNumberValid ||
       phoneVerificationIsLoading ||
-      phoneVerificationIsError,
-    [
-      debouncedPhoneNumber,
-      selectedCountryAreaCode,
-      contactVerificationId,
-      isPhoneNumberError,
-      phoneVerificationIsLoading,
-      phoneVerificationIsError,
-    ],
-  );
+      phoneVerificationIsError
+    );
+  }, [
+    phoneNumber,
+    selectedCountryAreaCode,
+    contactVerificationId,
+    phoneVerificationIsLoading,
+    phoneVerificationIsError,
+  ]);
 
   const renderFormFields = () => (
     <Box>
@@ -204,7 +206,7 @@ const SetPhoneNumber = () => {
           />
         </Box>
       </Box>
-      {debouncedPhoneNumber && phoneVerificationIsError ? (
+      {phoneNumber && phoneVerificationIsError ? (
         <Text
           variant={TextVariant.BodySm}
           testID="set-phone-number-phone-number-error"

app/components/UI/Card/components/Onboarding/SignUp.tsx

@@ -106,55 +106,69 @@ const SignUp = () => {
     setIsConfirmPasswordError(debouncedConfirmPassword !== debouncedPassword);
   }, [debouncedConfirmPassword, debouncedPassword]);
 
-  const isDisabled = useMemo(
-    () =>
-      !debouncedEmail ||
-      !debouncedPassword ||
-      !debouncedConfirmPassword ||
+  const isDisabled = useMemo(() => {
+    // Check the actual values, not the debounced ones
+    const isEmailValid = email ? validateEmail(email) : false;
+    const isPasswordValid = password ? validatePassword(password) : false;
+    const isConfirmPasswordValid = confirmPassword
+      ? confirmPassword === password
+      : false;
+
+    return (
+      !email ||
+      !password ||
+      !confirmPassword ||
       !selectedCountry ||
-      isPasswordError ||
-      isConfirmPasswordError ||
-      isEmailError ||
+      !isEmailValid ||
+      !isPasswordValid ||
+      !isConfirmPasswordValid ||
       emailVerificationIsError ||
-      emailVerificationIsLoading,
-    [
-      debouncedEmail,
-      debouncedPassword,
-      debouncedConfirmPassword,
-      selectedCountry,
-      isPasswordError,
-      isConfirmPasswordError,
-      isEmailError,
-      emailVerificationIsError,
-      emailVerificationIsLoading,
-    ],
-  );
+      emailVerificationIsLoading
+    );
+  }, [
+    email,
+    password,
+    confirmPassword,
+    selectedCountry,
+    emailVerificationIsError,
+    emailVerificationIsLoading,
+  ]);
 
   const handleEmailChange = useCallback(
-    (email: string) => {
+    (emailText: string) => {
       resetEmailVerificationSend();
-      setEmail(email);
+      setEmail(emailText);
     },
     [resetEmailVerificationSend],
   );
 
   const handlePasswordChange = useCallback(
-    (password: string) => {
+    (passwordText: string) => {
       resetEmailVerificationSend();
-      setPassword(password);
+      setPassword(passwordText);
     },
     [resetEmailVerificationSend],
   );
 
   const handleContinue = useCallback(async () => {
-    if (
-      !debouncedEmail ||
-      !debouncedPassword ||
-      !debouncedConfirmPassword ||
-      !selectedCountry
-    ) {
+    // Use actual values, not debounced ones
+    if (!email || !password || !confirmPassword || !selectedCountry) {
       return;
     }
+
+    // Validate current values before submitting
+    const isEmailValid = validateEmail(email);
+    const isPasswordValid = validatePassword(password);
+    const isConfirmPasswordValid = confirmPassword === password;
+
+    if (!isEmailValid || !isPasswordValid || !isConfirmPasswordValid) {
+      // Set error states
+      setIsEmailError(!isEmailValid);
+      setIsPasswordError(!isPasswordValid);
+      setIsConfirmPasswordError(!isConfirmPasswordValid);
+      return;
+    }
+
     try {
       trackEvent(
         createEventBuilder(MetaMetricsEvents.CARD_BUTTON_CLICKED)
@@ -163,15 +177,14 @@ const SignUp = () => {
           })
           .build(),
       );
-      const { contactVerificationId } =
-        await sendEmailVerification(debouncedEmail);
+      const { contactVerificationId } = await sendEmailVerification(email);
 
       dispatch(setContactVerificationId(contactVerificationId));
 
       if (contactVerificationId) {
         navigation.navigate(Routes.CARD.ONBOARDING.CONFIRM_EMAIL, {
-          email: debouncedEmail,
-          password: debouncedConfirmPassword,
+          email,
+          password: confirmPassword,
         });
       } else {
         // If no contactVerificationId, assume user is registered or email not valid
@@ -181,9 +194,9 @@ const SignUp = () => {
       // Allow error message to display
     }
   }, [
-    debouncedConfirmPassword,
-    debouncedEmail,
-    debouncedPassword,
+    confirmPassword,
+    email,
+    password,
     dispatch,
     navigation,
     selectedCountry,
@@ -224,7 +237,7 @@ const SignUp = () => {
           isError={debouncedEmail.length > 0 && isEmailError}
           testID="signup-email-input"
         />
-        {debouncedEmail.length > 0 && emailVerificationIsError ? (
+        {email.length > 0 && emailVerificationIsError ? (
           <Text
             testID="signup-email-error-text"
             variant={TextVariant.BodySm}

app/components/UI/Card/hooks/useRegisterUserConsent.test.ts

@@ -187,7 +187,7 @@ describe('useRegisterUserConsent', () => {
         });
 
         expect(mockCreateOnboardingConsent).toHaveBeenCalledWith({
-          policyType: 'US',
+          policyType: 'us',
           onboardingId: testOnboardingId,
           consents: [
             {
@@ -729,7 +729,7 @@ describe('useRegisterUserConsent', () => {
     const countryTestCases = [
       {
         country: 'US',
-        expectedPolicy: 'US',
+        expectedPolicy: 'us',
         description: 'US users',
       },
       {

app/components/UI/Card/hooks/useRegisterUserConsent.ts

@@ -96,7 +96,7 @@ export const useRegisterUserConsent = (): UseRegisterUserConsentReturn => {
         throw new Error('Card SDK not initialized');
       }
 
-      const policy = selectedCountry === 'US' ? 'US' : 'global';
+      const policy = selectedCountry === 'US' ? 'us' : 'global';
 
       try {
         // Reset state and start loading
@@ -117,7 +117,7 @@ export const useRegisterUserConsent = (): UseRegisterUserConsentReturn => {
           },
         };
         const consents: Consent[] = [
-          ...(policy === 'US' ? [eSignActConsent] : []),
+          ...(policy === 'us' ? [eSignActConsent] : []),
           {
             consentType: 'termsAndPrivacy',
             consentStatus: 'granted',

app/components/UI/Card/sdk/CardSDK.test.ts

@@ -2712,7 +2712,7 @@ describe('CardSDK', () => {
   describe('createOnboardingConsent', () => {
     it('creates onboarding consent successfully', async () => {
       const mockRequest: Omit<CreateOnboardingConsentRequest, 'tenantId'> = {
-        policyType: 'US',
+        policyType: 'us',
         onboardingId: 'onboarding123',
         consents: [],
         metadata: {
@@ -2749,7 +2749,7 @@ describe('CardSDK', () => {
 
     it('handles create onboarding consent error', async () => {
       const mockRequest: Omit<CreateOnboardingConsentRequest, 'tenantId'> = {
-        policyType: 'US',
+        policyType: 'us',
         onboardingId: 'onboarding123',
         consents: [],
         metadata: {
@@ -2789,7 +2789,7 @@ describe('CardSDK', () => {
             accepted: true,
           },
         ],
-        policyType: 'US',
+        policyType: 'us',
       };
 
       (global.fetch as jest.Mock).mockResolvedValue({