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

[runway-github]

• fix(card): cp-7.60.0 debounced inputs on onboarding flow (fix(card): cp-7.60.0 debounced inputs on onboarding flow #22747)

Description

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

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

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

Before

After

Pre-merge author checklist

• I’ve followed MetaMask Contributor
  Docs and MetaMask Mobile
  Coding
  Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format
  if applicable
• I’ve applied the right labels on the PR (see labeling
  guidelines).
  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.

---

Note

Use non-debounced form values for onboarding validation/submission and standardize consent policyType to us.

• Onboarding UI:
  • SignUp, SetPhoneNumber, PersonalDetails now validate/submit using current (non-debounced) inputs and update isDisabled accordingly.
  • Add upfront validation: email/password/confirm password match, phone ^\d{4,15}$, SSN ^\d{9}$ (US only); block submit and surface errors when invalid.
  • Replace uses of debounced* in API calls/navigation with live values; minor error rendering tweaks and cleanup.
• Consent Policy:
  • Standardize policyType from US to us in useRegisterUserConsent and comparisons.
  • Update CreateOnboardingConsentRequest type to policyType: 'us' | 'global' and adjust tests (useRegisterUserConsent.test.ts, CardSDK.test.ts).

^{Written by Cursor Bugbot for commit 4fb1a77. This will update automatically on new commits. Configure here.}

6a0949c

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeCard
• Risk Level: medium
• AI Confidence: 85%

click to see 🤖 AI reasoning details

All 7 changed files are related to Card onboarding functionality within the app/components/UI/Card/ directory. The changes include:

1. Onboarding Component Files (3 files):

   • PersonalDetails.tsx - Handles user personal details input during card onboarding
   • SetPhoneNumber.tsx - Manages phone number verification for card onboarding
   • SignUp.tsx - Handles the initial signup flow for card registration

2. Hook Files (2 files):

   • useRegisterUserConsent.ts - Custom hook managing user consent registration (a 2-stage process)
   • useRegisterUserConsent.test.ts - Comprehensive unit test for the consent hook (1061 lines)

3. SDK Files (1 file):

   • CardSDK.test.ts - Unit tests for the Card SDK

4. Type Definitions (1 file):

   • types.ts - TypeScript type definitions for Card functionality

Impact Assessment:

• These components are part of the Card onboarding flow which is a complete user journey from signup through identity verification
• The files are interconnected - PersonalDetails, SetPhoneNumber, and SignUp are all steps in the onboarding process that navigate between each other
• The consent hook is used as part of the onboarding address registration flow (Steps 7-10 based on comments)
• Changes affect form validation, error handling, and navigation flows

Why SmokeCard tag:

• The SmokeCard tag is designed for Card-related features (confirmed by examining e2e/specs/card/)
• While the exact onboarding flow might not have E2E test coverage yet, these changes affect core Card functionality
• Card onboarding is a critical user flow for the Card feature
• The changes involve user input validation, API interactions, and state management that should be verified

Risk Level: Medium because:

• These are functional changes to user-facing onboarding components
• The files don't appear to be critical infrastructure files (not in app/core/ or e2e/framework/)
• Changes include tests which suggest they're well-tested at the unit level
• However, Card onboarding is an important user flow that warrants E2E verification

Note: The changes appear to be existing files being modified rather than new files, though without git diff access I cannot determine the exact nature of modifications. Running SmokeCard tests will verify the Card functionality including any UI flows that might be affected by these changes.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
89.4% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[metamaskbot]

No release label on PR. Adding release label release-7.60.0 on PR, as PR was cherry-picked in branch 7.60.0.