Page Rejoindre refondue, groupe WhatsApp et billetterie en ligne - #39
Merged
Conversation
La page Rejoindre affirmait sans rien montrer, et ne menait nulle part : l'ancre #contact existait mais aucun lien du site n'y conduisait, si bien que le formulaire — seul point de conversion — n'était atteignable qu'en faisant défiler trois sections. Sa colonne de 896 px ne s'alignait ni sur l'en-tête ni sur le pied de page, d'où l'impression d'une page de mentions légales. Elle repart de ce qui retient vraiment un parent : quatre objections énoncées à voix haute puis désamorcées, avant toute demande. Vient ensuite ce qui prouve que l'association existe — les rendez-vous réellement publiés, avec les places qui restent, et la porte la plus basse qui soit : prendre un créneau sans compte. Le formulaire arrive en dernier, précédé de ce qui se passe après l'envoi. Le héros aligné sur max-w-7xl, deux boutons, une carte montrant le prochain rendez-vous et les chiffres du moment, une respiration colorée, des missions compactées en tuiles : la beauté vient de la typographie et de la couleur, faute de photographie. Tout reste calculé côté serveur : getUpcomingPublishedEvents rapporte aussi les inscriptions des bénévoles, jetons d'annulation compris, qui n'ont rien à faire dans le flux d'une page publique indexable. S'y ajoute le début de la billetterie en ligne : un lien par événement, saisi par l'organisateur. Le champ n'est pas réservé à HelloAsso — une APEL peut vendre ses places ailleurs — mais quand l'adresse est bien HelloAsso, elle est vérifiée : un lien vers l'espace d'administration, l'erreur la plus fréquente, ne montrerait aux familles qu'un écran de connexion. Une copie d'événement ne reprend jamais la billetterie de l'édition précédente. La présentation publique de ce lien suit, avec le bloc WhatsApp. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014SfQYBU4xXTeSEHKhHQXdD
Les familles suivent déjà l'association par WhatsApp ; le site n'en disait rien. Un carton d'invitation le dit maintenant sur la page « Rejoindre », avec un aperçu de ce qui circule dans le groupe : les dates, les changements de dernière minute, les coups de main cherchés. L'aperçu est une illustration, et il est cadré comme telle. Sa légende « Exemple de ce qui circule dans le groupe » est visible et lue avant les bulles, y compris par un lecteur d'écran : ni horodatage, ni double coche, ni prénom, rien qui puisse passer pour une conversation réelle. Un jury a écarté pour cette raison la maquette de notification, plus spectaculaire mais qui présentait comme reçu un message que l'association n'a jamais envoyé. Le vert de la marque n'apparaît qu'aux deux endroits où il signifie WhatsApp — le sceau et le bouton — et porte une encre bleu nuit : du blanc sur ce vert tomberait à 1,98:1, la correction que tout relecteur propose au premier coup d'œil. Ailleurs, un seul lien en texte, jamais le carton : dans le pied de page de tout le site public, une ligne sur l'accueil, et une phrase dans les deux écrans de confirmation — après avoir écrit, et après avoir pris un créneau, où le besoin est le plus concret. Le lien se règle dans Configuration ; sans lui, ni carton, ni lien de pied de page, ni mention nulle part. Le dépôt est public et l'application sert plusieurs associations : aucune invitation ne peut être écrite en dur, et le champ dit clairement que le lien publié ouvre le groupe à quiconque trouve la page. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014SfQYBU4xXTeSEHKhHQXdD
La page publique d'un événement ne connaissait qu'une seule « inscription » : se proposer comme bénévole. Avec une billetterie, il y en a deux, de nature opposée — je réserve ma place, je tiens un stand — et rien n'empêchait un parent de prendre un créneau de buvette en croyant réserver son entrée. Les deux démarches sont désormais séparées par le contenant, pas par la couleur d'un bouton : une bande turquoise traversante dans l'encart de l'événement pour « Je réserve ma place », la carte blanche du formulaire pour « Je donne un coup de main ». La distinction survit au daltonisme comme au niveau de gris, et la bande étant placée avant la description, sa position ne dépend pas de la longueur du texte saisi. Le vocabulaire tranche le reste, et c'est lui qui règle le fond : « réserver », « ma place », « billetterie » vont exclusivement à la plateforme ; « coup de main », « créneau », « mission » exclusivement au bénévolat. Le bouton « Je m'inscris » — le mot qu'un parent emploie pour inscrire son enfant à la kermesse — devient « Je prends ce créneau », le compteur « n places encore disponibles » devient « n coups de main encore recherchés », et l'objet de l'e-mail de confirmation, lu seul trois jours plus tard, ne dit plus « Inscription confirmée » mais nomme le créneau. Deux mentions sous le bouton disent ce que l'application ne fait pas : on quitte le site, la confirmation viendra de la plateforme et n'apparaîtra jamais ici ; réserver n'inscrit pas comme bénévole. L'écran de remerciement du bénévole le redit, parce que c'est là que le malentendu se scellerait. Corrige au passage deux défauts : le compteur affichait « 0 place encore disponible » sur un événement sans aucun créneau — à côté d'un bouton « Réserver », cela se lit « complet » — et le champ de saisie en type="url" faisait afficher au navigateur son propre message, dans la langue du système, avant les nôtres. Un nom d'hôte invraisemblable est maintenant refusé : « pas une adresse » devenait une URL valide une fois préfixée. Sur l'accueil, la billetterie n'est qu'une pastille non cliquable : la carte est déjà un lien, et personne ne doit partir payer sans avoir lu la date ni le lieu. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_014SfQYBU4xXTeSEHKhHQXdD
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Trois demandes traitées ensemble, parce qu'elles se rencontrent toutes sur les pages publiques : rendre la page « Rejoindre » engageante, annoncer le groupe WhatsApp, et permettre la billetterie en ligne d'un événement.
1. La page Rejoindre
Elle affirmait sans rien montrer et ne menait nulle part : l'ancre
#contactexistait mais aucun lien du site n'y conduisait, donc le formulaire — seul point de conversion — n'était atteignable qu'en faisant défiler trois sections. Sa colonne de 896 px ne s'alignait ni sur l'en-tête ni sur le pied de page (1280 px), d'où l'impression de page de mentions légales.Elle repart de ce qui retient réellement un parent : quatre objections énoncées puis désamorcées avant toute demande (« je n'ai pas le temps », « je ne connais personne », « je ne saurais pas quoi faire », « et si je ne peux plus ? » — celle-ci s'appuie sur le lien d'annulation réellement envoyé par e-mail). Vient ensuite ce qui prouve que l'association existe : les rendez-vous réellement publiés, avec les places restantes, et la porte la plus basse qui soit — prendre un créneau sans compte. Le formulaire arrive en dernier, précédé de ce qui se passe après l'envoi.
Tous les agrégats sont calculés côté serveur :
getUpcomingPublishedEventsrapporte aussi les inscriptions des bénévoles, jetons d'annulation compris, qui n'ont rien à faire dans le flux d'une page publique indexable.2. Le groupe WhatsApp
Un carton d'invitation sur la page Rejoindre, avec un aperçu de ce qui circule dans le groupe. L'aperçu est cadré comme illustration : légende visible lue avant les bulles, y compris par un lecteur d'écran ; ni horodatage, ni double coche, ni prénom. Le concept le plus spectaculaire (fausse notification d'écran verrouillé horodatée « à l'instant ») a été écarté : il présentait comme reçu un message que l'association n'a jamais envoyé.
Ailleurs, un simple lien : pied de page de tout le site, une ligne sur l'accueil, une phrase dans les deux écrans de confirmation. Le lien se règle dans Configuration ; sans lui, rien n'apparaît nulle part.
L'encre du bouton est bleu nuit sur le vert de la marque : du blanc tomberait à 1,98:1. C'est écrit en commentaire dans le fichier, parce que c'est la « correction » que tout relecteur propose.
3. La billetterie d'un événement
Champ par événement, saisi par un organisateur. Le nom est neutre (
ticketingUrl) et n'importe quelle adressehttps://est acceptée — une APEL peut vendre ailleurs — mais quand l'adresse est HelloAsso, elle est vérifiée : un lienadmin.helloasso.com(l'erreur la plus fréquente) ne montrerait aux familles qu'un écran de connexion.Le point délicat était la cohabitation avec l'inscription bénévole. Les deux démarches sont séparées par le contenant, pas par la couleur : bande turquoise traversante pour « Je réserve ma place », carte blanche du formulaire pour « Je donne un coup de main ». Et surtout par le vocabulaire — « réserver / ma place / billetterie » à la plateforme, « coup de main / créneau / mission » au bénévolat :
Deux mentions sous le bouton disent ce que l'application ne fait pas : on quitte le site, la confirmation viendra de la plateforme, et réserver n'inscrit pas comme bénévole.
Défauts corrigés au passage
inline-flex, donc rendus sur la même ligne, l'un chevauchant l'autre.type="url"faisait afficher au navigateur son propre message, dans la langue du système, avant les cinq messages français.https://pas%20une%20adresse…) : le nom d'hôte est maintenant contrôlé.Vérifications
Instance réelle (PostgreSQL 16, migrations,
next build+next start), navigateur réel (Chromium/Playwright), captures relues.h1, deuxh2frères, dans les trois étatsDeux migrations :
0017_event_ticketing_url,0018_whatsapp_group_link.Generated by Claude Code