feat: Add payment instructions and support attendees feature in sponsorship flow

Signed-off-by: Steve Yonkeu <yokwejuste@yahoo.com>

Author: yokwejuste

src/data/ticketSponsor.js

@@ -4,3 +4,11 @@ export const ticketSponsorEndpoint =
 export const ticketSponsorSheetName = 'Ticket Sponsors';
 
 export const paymentMethods = ['MTN Mobile Money (MoMo)', 'Orange Money (OM)'];
+
+export const payTo = {
+    mtn: '677123206',
+    orange: '656246181',
+    name: 'STEVE YONKEU',
+};
+
+export const ticketPriceXAF = 3000;

src/i18n/en.json

@@ -37,6 +37,7 @@
     "viewAgenda": "View Agenda",
     "callForSpeakers": "Call For Speakers",
     "getYourTicket": "Get Your Ticket",
+    "supportAttendees": "Support Attendees",
     "welcomeTitle": "Welcome to",
     "welcomeTitleHighlight": "PyCon Cameroon 2026",
     "welcomeText": "Join us for Cameroon's first-ever PyCon, a celebration of Python, technology, and African innovation. Experience two days of inspiring talks, hands-on workshops, and unforgettable networking opportunities in the vibrant city of Yaound\u00e9.",

src/i18n/fr.json

@@ -37,6 +37,7 @@
     "viewAgenda": "Voir l'agenda",
     "callForSpeakers": "Appel aux intervenants",
     "getYourTicket": "Obtenez votre billet",
+    "supportAttendees": "Parrainer des participants",
     "welcomeTitle": "Bienvenue \u00e0",
     "welcomeTitleHighlight": "PyCon Cameroun 2026",
     "welcomeText": "Rejoignez-nous pour le tout premier PyCon du Cameroun, une c\u00e9l\u00e9bration de Python, de la technologie et de l'innovation africaine. Vivez deux jours de conf\u00e9rences inspirantes, d'ateliers pratiques et d'opportunit\u00e9s de r\u00e9seautage inoubliables dans la ville dynamique de Yaound\u00e9.",

src/index.css

@@ -2398,6 +2398,17 @@ img {
     flex-wrap: wrap;
 }
 
+@media (min-width: 992px) {
+    .hero-buttons {
+        flex-wrap: nowrap;
+    }
+
+    .hero-buttons .btn {
+        white-space: nowrap;
+        flex-shrink: 0;
+    }
+}
+
 .features {
     background: linear-gradient(180deg, var(--color-dark) 0%, var(--color-black) 100%);
 }

src/pages/Home.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { useLocalizedPath } from '../hooks/useLocalizedPath';
-import { Calendar, MapPin, CalendarDays, Ticket } from 'lucide-react';
+import { Calendar, MapPin, CalendarDays, Ticket, HeartHandshake } from 'lucide-react';
 import { useTranslation } from 'react-i18next';
 import useScrollAnimation from '../hooks/useScrollAnimation';
 import LazyImage from '../components/LazyImage';
@@ -41,6 +41,9 @@ const Home = () => {
                         <Link to={l('/attend')} className="btn btn-secondary btn-lg">
                             <Ticket size="1em" style={{ verticalAlign: '-0.125em' }} /> {t('home.getYourTicket')}
                         </Link>
+                        <Link to={l('/attend/sponsor')} className="btn btn-primary btn-lg">
+                            <HeartHandshake size="1em" style={{ verticalAlign: '-0.125em' }} /> {t('home.supportAttendees')}
+                        </Link>
                     </div>
                 </div>
             </section>

src/pages/TicketSponsor.jsx

@@ -2,24 +2,26 @@ import { useEffect, useRef } from 'react';
 import { useParams } from 'react-router-dom';
 import { Composer, Formsmd } from 'formsmd';
 import 'formsmd/dist/css/formsmd.min.css';
-import { ticketSponsorEndpoint, ticketSponsorSheetName, paymentMethods } from '../data/ticketSponsor';
+import { ticketSponsorEndpoint, ticketSponsorSheetName, paymentMethods, payTo, ticketPriceXAF } from '../data/ticketSponsor';
 import '../styles/sponsor-form.css';
 
 const copy = {
     en: {
         title: 'Sponsor a Student',
         titleHighlight: 'Ticket',
         subtitle: 'Cover the cost of a ticket so a student can attend PyCon Cameroon 2026. Pay by MTN MoMo or Orange Money, then confirm your gift below so we can match it and thank you.',
-        intro: '### Let us confirm your gift\nAnswer a few quick questions. Send your mobile money payment first, then have the confirmation code ready.',
+        intro: '### Let us set up your gift\nAnswer a few quick questions about you, then you will make the payment and confirm it here.',
         name: 'First things first, how can we call you?',
         nameDesc: 'The name we should address you by.',
         emailGreeting: 'Thanks {$ fullName $}!',
         email: 'What email can we reach you on?',
         organisation: 'Are you giving on behalf of a company or organisation?',
         organisationDesc: 'Leave this blank to sponsor as an individual.',
         phone: 'What phone number can we reach you on?',
-        ticketsGreeting: 'Here is the important part, {$ fullName $}.',
+        ticketsGreeting: 'Almost there, {$ fullName $}.',
         tickets: 'How many student tickets would you like to sponsor?',
+        payInstructions: (p, price) =>
+            `### Now make the payment\nYou are sponsoring **{$ tickets $}** ticket(s) at **${price.toLocaleString('en-US')} FCFA** each. Please send **(number of tickets × ${price.toLocaleString('en-US')} FCFA) + mobile money charges** to **one** of these numbers, then come back to confirm:\n\n- **MTN MoMo:** ${p.mtn}\n- **Orange Money:** ${p.orange}\n\nBoth accounts are registered to **${p.name}**. Once your transfer is done, tap OK and we will record the confirmation.`,
         amount: 'How much did you send in total?',
         amountDesc: 'The total you paid by mobile money, in XAF.',
         method: 'Which service did you pay with?',
@@ -39,16 +41,18 @@ const copy = {
         title: 'Parrainez un billet',
         titleHighlight: 'étudiant',
         subtitle: "Prenez en charge un billet pour qu'un étudiant puisse participer à la PyCon Cameroun 2026. Payez par MTN MoMo ou Orange Money, puis confirmez votre don ci-dessous pour que nous puissions le rapprocher et vous remercier.",
-        intro: '### Confirmons votre don\nRépondez à quelques questions rapides. Effectuez d\'abord votre paiement mobile money, puis gardez le code de confirmation à portée de main.',
+        intro: '### Préparons votre don\nRépondez à quelques questions sur vous, puis vous effectuerez le paiement et le confirmerez ici.',
         name: 'Pour commencer, comment pouvons-nous vous appeler ?',
         nameDesc: 'Le nom sous lequel nous devons vous adresser.',
         emailGreeting: 'Merci {$ fullName $} !',
         email: 'À quelle adresse email pouvons-nous vous joindre ?',
         organisation: "Faites-vous ce don au nom d'une entreprise ou d'une organisation ?",
         organisationDesc: 'Laissez vide pour parrainer à titre individuel.',
         phone: 'Sur quel numéro de téléphone pouvons-nous vous joindre ?',
-        ticketsGreeting: 'Voici le plus important, {$ fullName $}.',
+        ticketsGreeting: 'Presque fini, {$ fullName $}.',
         tickets: 'Combien de billets étudiants souhaitez-vous parrainer ?',
+        payInstructions: (p, price) =>
+            `### Effectuez maintenant le paiement\nVous parrainez **{$ tickets $}** billet(s) à **${price.toLocaleString('fr-FR')} FCFA** chacun. Envoyez **(nombre de billets × ${price.toLocaleString('fr-FR')} FCFA) + les frais mobile money** à **l'un** de ces numéros, puis revenez confirmer :\n\n- **MTN MoMo :** ${p.mtn}\n- **Orange Money :** ${p.orange}\n\nLes deux comptes sont enregistrés au nom de **${p.name}**. Une fois le transfert effectué, appuyez sur OK et nous enregistrerons la confirmation.`,
         amount: 'Quel montant total avez-vous envoyé ?',
         amountDesc: 'Le total payé par mobile money, en XAF.',
         method: 'Avec quel service avez-vous payé ?',
@@ -114,11 +118,14 @@ function buildTemplate(lang) {
     composer.numberInput('tickets', { question: t.tickets, required: true, min: 1, max: 500, step: 1, value: 1 });
 
     composer.slide();
-    composer.numberInput('amountPaid', { question: t.amount, description: t.amountDesc, required: true, min: 100, step: 1, unitEnd: 'XAF' });
+    composer.free(t.payInstructions(payTo, ticketPriceXAF));
 
     composer.slide();
     composer.choiceInput('paymentMethod', { question: t.method, choices: paymentMethods, required: true });
 
+    composer.slide();
+    composer.numberInput('amountPaid', { question: t.amount, description: t.amountDesc, required: true, min: 100, step: 1, unitEnd: 'XAF' });
+
     composer.slide();
     composer.telInput('payerNumber', { question: t.payerNumber, description: t.payerNumberDesc, required: true, maxlength: 20 });