1. Objectif de la page

La page Trouver un agent IretiPay permet à l’utilisateur de localiser un agent IretiPay à proximité afin d’effectuer une recharge du compte en espèces.

Elle facilite l’accès aux points physiques de recharge en s’appuyant sur la géolocalisation.

2. Contexte d’accès

Cette page est accessible depuis :

• Accueil
• Recharger le compte
• Espèces → Agent IretiPay

Elle s’affiche sous forme de fenêtre modale / panneau glissant au‑dessus de la page précédente.

3. Structure générale de la page

3.1 Type d’affichage

• Panneau modal avec coins arrondis
• Fond semi‑transparent sur la page arrière
• Contenu centré et focalisé sur l’action principale

4. En‑tête de la page

4.1 Titre

Trouver un agent IretiPay

🎯 Indique clairement l’action attendue : rechercher un agent.

4.2 Indicateur visuel

• Petite barre horizontale en haut du panneau
• Sert d’indication que le panneau peut être glissé ou fermé

5. Zone d’information – Localisation des agents

5.1 Carte informative

• Icône : repère de localisation (pin)
• Titre : Localisation des agents
• Description :
  Trouvez l’agent le plus proche de votre position

🎯 Objectif :

• Expliquer l’utilité de la fonctionnalité
• Rassurer l’utilisateur sur le résultat attendu (agent le plus proche)

6. Bouton d’action principal

6.1 Bouton : Localiser les agents

• Couleur : Vert
• Icône : Cible / GPS
• Position : Sous la zone d’information
• Action :
  • Demande l’autorisation d’accès à la géolocalisation
  • Détecte la position actuelle de l’utilisateur
  • Affiche la liste ou la carte des agents IretiPay disponibles à proximité

7. Comportements fonctionnels attendus

7.1 Géolocalisation

• ✅ Demande de permission GPS au premier usage
• ✅ Utilisation de la position actuelle de l’utilisateur
• ✅ Recherche des agents dans un rayon défini (ex. 1 à 5 km)

7.2 Cas d’erreurs à gérer

• ❌ GPS désactivé
• ❌ Permission refusée
• ❌ Aucun agent trouvé à proximité
• ❌ Problème de connexion internet

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

8. Barre de navigation inférieure

Toujours visible derrière le panneau :

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

📌 Assure la continuité de navigation dans l’application.

9. Règles UX / UI

• Action principale unique et bien mise en évidence
• Texte clair et concis
• Icônes explicites (localisation)
• Interaction rapide pour éviter toute friction utilisateur

10. Résumé

✅ Page orientée recherche rapide d’agent
✅ Utilisation de la géolocalisation pour une meilleure expérience
✅ Interface simple, intuitive et guidée
✅ Étape clé pour la recharge en espèces