1. Objectif de la page

La page Sélectionner un contact permet à l’utilisateur de choisir un contact existant afin de réaliser une opération, principalement :

• un transfert d’argent
• ou toute action nécessitant un destinataire enregistré

Elle facilite la recherche rapide d’un contact déjà connu.

2. Contexte d’accès

Cette page est accessible depuis :

• le parcours Transfert
• l’option Choisir un contact existant
• ou toute fonctionnalité nécessitant la sélection d’un bénéficiaire

3. En‑tête de la page

3.1 Bouton retour

• Icône : flèche retour
• Fonction : revenir à la page précédente sans sélection

3.2 Titre

Sélectionner un contact

🎯 Indique clairement l’action attendue de l’utilisateur.

4. Barre de recherche de contact

4.1 Champ de recherche

• Placeholder : Rechercher un contact…
• Icône : loupe
• Fonction :
  • filtrer la liste des contacts
  • recherche par nom et/ou numéro de téléphone
• Comportement :
  • recherche dynamique à la saisie
  • insensible à la casse

4.2 Bouton d’ajout

• Icône : ➕ (plus)
• Fonction :
  • ajouter un nouveau contact
  • rediriger vers la page de création de contact ou de nouveau destinataire

5. Liste des contacts

5.1 Titre de section

Tous les contacts

5.2 État de chargement

Lorsque les contacts ne sont pas encore disponibles :

• Indicateur visuel : loader circulaire
• Message :
  Chargement des contacts…

🎯 Objectif :

• informer l’utilisateur que les données sont en cours de récupération
• éviter toute confusion ou action prématurée

5.3 Source des contacts

Les contacts affichés peuvent provenir :

• du répertoire interne de l’application
• des contacts autorisés du téléphone (si permission accordée)

6. Comportements fonctionnels attendus

6.1 Chargement

• ✅ Chargement automatique à l’ouverture de la page
• ✅ Rafraîchissement rapide de la liste
• ✅ Gestion des erreurs réseau ou permission refusée

6.2 Sélection d’un contact

• Un tap sur un contact :
  • sélectionne le destinataire
  • redirige vers l’étape suivante (ex. saisie du montant)

6.3 Cas d’erreurs à gérer

• ❌ Aucun contact trouvé
• ❌ Accès aux contacts refusé
• ❌ Erreur de synchronisation
• ❌ Connexion internet indisponible

👉 Dans chaque cas, un message clair et une action corrective doivent être proposés.

7. Barre de navigation inférieure

Éléments visibles :

• 🏠 Accueil
• 📷 QR Code (bouton central)
• 🧾 Factures

📌 Cette barre reste fixe pour garantir une navigation fluide.

8. Règles UX / UI

• Interface épurée et lisible
• Recherche rapide et efficace
• Indicateur de chargement visible
• Accès facile à l’ajout d’un nouveau contact

9. Sécurité et confidentialité

• Les contacts sont affichés uniquement après autorisation
• Aucune modification du répertoire sans action explicite de l’utilisateur
• Les données sont utilisées uniquement dans le cadre de la transaction

10. Résumé

✅ Page dédiée à la sélection rapide d’un destinataire
✅ Recherche et ajout de contact intégrés
✅ Gestion claire des états de chargement
✅ Étape clé du parcours de transfert d’argent