feat(events): courriel d'invitation plus festif + titre « Targo fête ses 20 ans »

- Titre corrigé partout (courriel, page RSVP, admin) : « Fête Targo 20 ans » →
  « Targo fête ses 20 ans » (FR) / « Targo turns 20! » (EN), tagline étoffée.
- Courriel refait façon flyer : bandeau confetti + ballons 🎈 + pastille « 20 ANS »,
  programme en cercles colorés (vert/bleu/violet/rose/orange), encart « places limitées »,
  ligne « Merci de votre confiance au fil des années 💚 », pied targo.ca.

Déployé hub 2026-07-06 (page RSVP live = « Targo fête ses 20 ans » ; test envoyé OK).
La page RSVP et le nom en admin viennent du hub — pas de rebuild SPA requis (le repli
cosmétique dans EventsPage suivra au prochain déploiement SPA). 21/21 tests unitaires.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
louispaulb 2026-07-06 12:24:06 -04:00
parent 50501aca5f
commit c8cb6bfa5d
2 changed files with 32 additions and 20 deletions

View File

@ -7,7 +7,7 @@
<div class="row items-center ops-row-wrap q-gutter-sm">
<div class="ev-badge"><b>20</b><span>ANS</span></div>
<div class="col" style="min-width:0">
<div class="text-h6 text-weight-bold ellipsis">{{ ev.name || 'Fête Targo 20 ans' }}</div>
<div class="text-h6 text-weight-bold ellipsis">{{ ev.name || 'Targo fête ses 20 ans' }}</div>
<div class="text-caption text-grey-7">
<q-icon name="event" size="16px" class="q-mr-xs" />{{ ev.when || '1ᵉʳ août, de 10 h à 15 h' }}
</div>

View File

@ -38,8 +38,8 @@ const SEED = {
active: true,
date_iso: '2026-08-01',
fr: {
name: 'Fête Targo 20 ans',
tagline: "Toute l'équipe de Targo est heureuse de vous inviter à notre fête de 20 ans !",
name: 'Targo fête ses 20 ans',
tagline: "Toute l'équipe de Targo est heureuse de vous inviter à notre grande fête d'anniversaire !",
when: '1ᵉʳ août, de 10 h à 15 h',
body: "Joignez-vous à nous pour une journée de plaisir, de rencontres et de célébration en compagnie des employés de Targo et de leurs familles.",
program: [
@ -78,8 +78,8 @@ const SEED = {
foot: 'TARGO — votre fournisseur Internet local',
},
en: {
name: "Targo's 20th Anniversary",
tagline: 'The whole Targo team is happy to invite you to our 20th anniversary party!',
name: 'Targo turns 20!',
tagline: 'The whole Targo team is happy to invite you to our big anniversary celebration!',
when: 'August 1st, 10 a.m. to 3 p.m.',
body: 'Join us for a day of fun, meeting people and celebrating alongside the Targo team and their families.',
program: [
@ -182,23 +182,35 @@ function inviteSubject (eventId, lang) {
function inviteEmail (eventId, lang, name, rsvpUrl) {
const e = getEvent(eventId); if (!e) return ''
lang = normLang(lang); const t = e[lang]
const prog = t.program.map(p => `${p.icon} ${esc(p.label)}`).join(' &nbsp;·&nbsp; ')
const merci = lang === 'en' ? 'Thank you for your trust over the years! 💚' : 'Merci de votre confiance au fil des années ! 💚'
const CIRC = ['#e6f7ea', '#e3f2fd', '#ede7f6', '#fce4ec', '#fff3e0']
const LBL = ['#1e8e3e', '#1976d2', '#7e57c2', '#d81b60', '#ef6c00']
const prog = t.program.map((p, i) =>
`<td align="center" valign="top" style="padding:6px 3px">`
+ `<div style="width:50px;height:50px;line-height:50px;border-radius:25px;background:${CIRC[i % 5]};font-size:25px;margin:0 auto">${p.icon}</div>`
+ `<div style="margin-top:6px;font-size:10px;font-weight:700;color:${LBL[i % 5]};line-height:1.2">${esc(p.label)}</div></td>`).join('')
return `<!doctype html><html lang="${lang}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"></head>`
+ `<body style="margin:0;background:#f4f6f8;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#1e293b">`
+ `<table role="presentation" width="100%" cellpadding="0" cellspacing="0"><tr><td align="center" style="padding:36px 16px">`
+ `<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="max-width:600px;background:#fff;border-radius:16px;overflow:hidden;border:1px solid #e2e8f0">`
+ `<tr><td style="height:8px;background:linear-gradient(90deg,#21a34a 0 20%,#29a3dd 20% 40%,#ffcd05 40% 60%,#f7941d 60% 80%,#173a5e 80% 100%);font-size:0;line-height:0">&nbsp;</td></tr>`
+ `<tr><td style="padding:26px 30px 6px" align="center"><img src="${LOGO}" alt="TARGO" width="140" style="width:140px;max-width:140px;height:auto;display:block;border:0"></td></tr>`
+ `<tr><td style="padding:6px 30px 0" align="center"><h1 style="margin:8px 0 4px;font-size:24px;font-weight:800;color:#173a5e">${esc(t.name)}</h1>`
+ `<p style="margin:0;font-size:15px;font-weight:700;color:#21a34a">${esc(t.tagline)}</p></td></tr>`
+ `<tr><td style="padding:18px 30px 4px"><p style="margin:0 0 10px;font-size:15px;line-height:1.6;color:#475569">${esc(t.greet(firstName(name)) || '')}</p>`
+ `<body style="margin:0;background:#eef4f8;font-family:-apple-system,Segoe UI,Roboto,Arial,sans-serif;color:#1e293b">`
+ `<table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:#eef4f8"><tr><td align="center" style="padding:30px 14px">`
+ `<table role="presentation" width="600" cellpadding="0" cellspacing="0" style="max-width:600px;background:#fff;border-radius:18px;overflow:hidden;border:1px solid #e2e8f0">`
+ `<tr><td style="height:10px;background:linear-gradient(90deg,#21a34a 0 20%,#29a3dd 20% 40%,#ffcd05 40% 60%,#f7941d 60% 80%,#173a5e 80% 100%);font-size:0;line-height:0">&nbsp;</td></tr>`
+ `<tr><td align="center" style="padding:22px 30px 0">`
+ `<div style="font-size:24px;letter-spacing:6px;line-height:1">🎈🎉🎈</div>`
+ `<div style="display:inline-block;background:#21a34a;color:#fff;font-weight:800;font-size:12px;letter-spacing:1.5px;padding:6px 16px;border-radius:999px;margin:10px 0 8px">🎉 20 ANS 🎉</div><br>`
+ `<img src="${LOGO}" alt="TARGO" width="150" style="width:150px;max-width:150px;height:auto;display:inline-block;border:0;margin:2px 0"></td></tr>`
+ `<tr><td align="center" style="padding:8px 26px 0"><h1 style="margin:6px 0 4px;font-size:27px;font-weight:800;color:#173a5e;line-height:1.15">${esc(t.name)} 🎉</h1>`
+ `<p style="margin:0;font-size:15px;font-weight:700;color:#21a34a;line-height:1.4">${esc(t.tagline)}</p></td></tr>`
+ `<tr><td style="padding:16px 34px 4px"><p style="margin:0 0 10px;font-size:15px;line-height:1.6;color:#475569">${esc(t.greet(firstName(name)) || '')}</p>`
+ `<p style="margin:0;font-size:15px;line-height:1.6;color:#475569">${esc(t.body)}</p></td></tr>`
+ `<tr><td style="padding:14px 30px 6px" align="center"><table role="presentation" cellpadding="0" cellspacing="0"><tr><td style="background:#173a5e;border-radius:12px;padding:12px 22px;color:#fff;font-size:17px;font-weight:700">📅 ${esc(t.when)}</td></tr></table></td></tr>`
+ `<tr><td style="padding:10px 30px 4px" align="center"><p style="margin:0;font-size:14px;color:#334155">${prog}</p></td></tr>`
+ `<tr><td style="padding:8px 30px 4px"><p style="margin:0;font-size:14px;line-height:1.6;color:#9a3412;background:#fff7ed;border:1px solid #fed7aa;border-radius:10px;padding:11px 14px">⏳ ${esc(t.limited)}</p></td></tr>`
+ `<tr><td style="padding:20px 30px 8px" align="center"><table role="presentation" cellpadding="0" cellspacing="0"><tr><td style="background:#21a34a;border-radius:14px"><a href="${esc(rsvpUrl)}" target="_blank" style="display:inline-block;padding:15px 34px;color:#fff;font-size:16px;font-weight:800;text-decoration:none">${esc(t.submit)} →</a></td></tr></table></td></tr>`
+ `<tr><td style="padding:6px 30px 22px" align="center"><p style="margin:0;font-size:13px;color:#94a3b8">${esc(t.closing)}</p></td></tr>`
+ `<tr><td style="background:#f8fafc;padding:14px 30px;border-top:1px solid #eef2f7;font-size:12px;color:#94a3b8">${esc(t.notes[0])}<br>${esc(t.notes[1])}<br><br>${esc(t.foot)}</td></tr>`
+ `<tr><td align="center" style="padding:16px 30px 6px"><table role="presentation" cellpadding="0" cellspacing="0"><tr><td style="background:#173a5e;border-radius:12px;padding:13px 24px;color:#fff;font-size:18px;font-weight:800">📅 ${esc(t.when)}</td></tr></table></td></tr>`
+ `<tr><td style="padding:14px 18px 4px"><table role="presentation" width="100%" cellpadding="0" cellspacing="0"><tr>${prog}</tr></table></td></tr>`
+ `<tr><td align="center" style="padding:2px 30px 8px"><p style="margin:0;font-size:13px;font-style:italic;color:#94a3b8">${esc(t.program_line)}</p></td></tr>`
+ `<tr><td style="padding:6px 30px 4px"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background:#fff5f5;border:1px solid #fecaca;border-radius:12px"><tr><td style="padding:12px 16px;font-size:14px;line-height:1.6;color:#9a3412">⏳ ${esc(t.limited)}</td></tr></table></td></tr>`
+ `<tr><td align="center" style="padding:20px 30px 6px"><table role="presentation" cellpadding="0" cellspacing="0"><tr><td style="background:#21a34a;border-radius:14px;box-shadow:0 6px 16px rgba(33,163,74,.3)"><a href="${esc(rsvpUrl)}" target="_blank" style="display:inline-block;padding:16px 40px;color:#fff;font-size:17px;font-weight:800;text-decoration:none">${esc(t.submit)} →</a></td></tr></table></td></tr>`
+ `<tr><td align="center" style="padding:8px 30px 20px"><p style="margin:0;font-size:15px;font-weight:700;color:#21a34a">${esc(merci)}</p>`
+ `<p style="margin:6px 0 0;font-size:13px;color:#94a3b8">${esc(t.closing)}</p></td></tr>`
+ `<tr><td style="background:#f0f7f2;padding:16px 30px;text-align:center;font-size:12px;line-height:1.6;color:#94a3b8;border-top:1px solid #e2e8f0">${esc(t.notes[0])}<br>${esc(t.notes[1])}`
+ `<div style="margin-top:12px;padding-top:12px;border-top:1px solid #dce8e0"><a href="https://targo.ca" style="color:#21a34a;font-weight:700;text-decoration:none">🌐 targo.ca</a> &nbsp;·&nbsp; ${esc(t.foot)}</div></td></tr>`
+ `</table></td></tr></table></body></html>`
}