Visible Title:
“Welcome to Iretipay! Please enter your phone number to continue.”

Objective:
Authenticate / register the user using their phone number to start the sign-up or login process.

1) Context & Scope

Platform: Mobile application (Android/iOS).
Default country: Côte d’Ivoire (country code +225).
Journey moment: First launch / Reconnection.

🧩 Visible UI Components

• Country selector + country code
  Flag: 🇨🇮
  Pre-filled code: +225
  Change option: dropdown list of countries/codes (optional at launch).
• Phone number input field
  Placeholder: xx xx xx xx (CI format, 10 digits).
  Numeric keyboard on screen (0–9) + delete button.
• Primary button
  Label: “Continue”
  State: disabled until the number is valid.

✅ Functional Rules & Validations

Number format & validation (Côte d’Ivoire):

• Length: 10 digits (excluding country code).
• Allowed characters: digits only (0–9).
• Masking / spacing: displayed in groups (XX XX XX XX), stored without spaces.

Valid examples: 0701020304, 0102030405.
Invalid examples: too short/long, letters/symbols, 0000000000.

“Continue” button states:

• Disabled if: field empty, length ≠ 10, non-numeric characters.
• Enabled if: number is valid + country/code defined.

Errors & Messages

• Invalid format: “Invalid number. Please enter a 10-digit Ivorian number.”
• Number already used (if account exists): “This number is already linked to an account. Continue to log in.”
• Service unavailable: “Service temporarily unavailable. Please try again later.”
• Too many attempts (rate limiting): “Too many attempts. Try again in 10 minutes.”

🌍 Localization & Languages

• Default: French (CI).
• Translatable texts: title, hints, errors, button labels.
• Handle different formats if user changes country (e.g., +233, +234…).