79ae38db60
Two big moves:
1. Promote MJML to the canonical template format
- Move gift-email-fr-mjml.{mjml,html} → gift-email-fr.{mjml,html}
- Create gift-email-en.mjml (English translation of FR MJML)
- Compile EN MJML → gift-email-en.html
- Remove obsolete variants:
• gift-email-fr-simple.html (now replaced by MJML)
• gift-email-en-simple.html (same)
• gift-email-fr-mjml.* (renamed to canonical)
- The old gift-email-fr.html (rich-with-merchant-grid version) is
backed up as gift-email-fr.legacy-rich.html.bak — kept on disk
for reference but not in the editable list.
- EDITABLE_TEMPLATES is now just ['gift-email-fr', 'gift-email-en'],
both backed by .mjml source + .html auto-compiled output.
2. Add "Envoyer un test" feature
Backend:
- POST /campaigns/templates/:name/test-send accepts { to, vars,
from?, subject? }. Reads compiled .html, renders Mustache vars,
sends via Mailjet through email.sendEmail with X-MJ-CustomID
"test-send:<name>:<timestamp>" so webhook events for tests are
identifiable. Returns { sent, to, from, message_id, bytes }.
- Default vars are sensible: firstname="Louis", amount="60 $",
gift_url="https://gft.link/TEST123", etc. User overrides any
via the request body.
Frontend (TemplateEditorPage):
- Toolbar button "Envoyer un test" (orange) — opens a dialog.
- Dialog has email input + subject + 7 variable inputs
(firstname, lastname, amount, commitment_months, gift_url,
description, expiry) with sensible defaults.
- "Dirty" banner warning: if the user has unsaved changes, the
test will use the LAST SAVED version (so save first to test the
latest). Mentions explicitly in card footer.
- On send: live notification with the message_id + byte count.
Errors surface clearly.
Verified live in prod:
POST /campaigns/templates/gift-email-fr/test-send → 200, message_id
returned, ~32 KB rendered MJML→HTML output, sent from
TARGO <support@targointernet.com> (Mailjet-validated sender).
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
363 lines
20 KiB
HTML
363 lines
20 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="fr">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>Une offre exclusive de TARGO</title>
|
||
<!-- Brand fonts: Space Grotesk for display, Plus Jakarta Sans for body.
|
||
Wrapped in MSO conditional comment so Outlook desktop skips the
|
||
Google Fonts request (it can't render them anyway) and falls back
|
||
to Helvetica via the font-family stack on each element. -->
|
||
<!--[if !mso]><!-->
|
||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
|
||
<!--<![endif]-->
|
||
</head>
|
||
<body style="margin:0; padding:0; background:#F5FAF7; font-family:'Plus Jakarta Sans','Helvetica Neue',Helvetica,Arial,sans-serif; color:#1B2E24; line-height:1.5;">
|
||
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
|
||
<tr>
|
||
<td align="center" style="padding:32px 16px;">
|
||
|
||
<!-- Main card -->
|
||
<table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0"
|
||
style="max-width:600px; background:#ffffff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden;">
|
||
|
||
<!-- Logo header (clean, no colored band) -->
|
||
<tr>
|
||
<td style="padding:28px 36px 22px; border-bottom:1px solid #eef0ee;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content"
|
||
alt="TARGO" width="140"
|
||
style="display:block; border:0; outline:none; text-decoration:none; max-width:140px; height:auto;">
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Greeting + hook -->
|
||
<tr>
|
||
<td style="padding:26px 36px 4px;">
|
||
<p style="margin:0 0 14px; font-size:1rem; color:#374151;">Bonjour {{firstname}},</p>
|
||
<p style="margin:0 0 10px; font-size:1.08rem; color:#1B2E24; font-weight:500;">
|
||
Comme toi, on aime les connexions stables et les relations durables.
|
||
</p>
|
||
<p style="margin:0; font-size:1rem; color:#374151;">
|
||
Avec l'arrivée de l'été, voici ton
|
||
<strong>offre exclusive pour un temps limité</strong> :
|
||
</p>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Info pill: gift card amount -->
|
||
<tr>
|
||
<td style="padding:18px 36px 8px;">
|
||
<div style="background:#F5FAF7; border-radius:10px; padding:14px 18px;">
|
||
<div style="font-size:0.7rem; font-weight:700; letter-spacing:0.12em; color:#9ca3af; text-transform:uppercase; margin-bottom:4px;">
|
||
Carte-cadeau numérique
|
||
</div>
|
||
<div style="font-size:1.05rem; font-weight:700; color:#1B2E24;">
|
||
🎁 {{amount}} chez des centaines de marques
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Two-column: ENVOI + CONDITION -->
|
||
<tr>
|
||
<td style="padding:6px 36px 18px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
|
||
<tr>
|
||
<td width="50%" style="padding-right:5px; vertical-align:top;">
|
||
<div style="background:#F5FAF7; border-radius:10px; padding:14px 16px;">
|
||
<div style="font-size:0.7rem; font-weight:700; letter-spacing:0.12em; color:#9ca3af; text-transform:uppercase; margin-bottom:4px;">
|
||
Envoi
|
||
</div>
|
||
<div style="font-size:0.95rem; font-weight:700; color:#1B2E24;">
|
||
⚡ Instantané à l'activation
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td width="50%" style="padding-left:5px; vertical-align:top;">
|
||
<div style="background:#F5FAF7; border-radius:10px; padding:14px 16px;">
|
||
<div style="font-size:0.7rem; font-weight:700; letter-spacing:0.12em; color:#9ca3af; text-transform:uppercase; margin-bottom:4px;">
|
||
Condition
|
||
</div>
|
||
<div style="font-size:0.95rem; font-weight:700; color:#1B2E24;">
|
||
🤝 Rester encore {{commitment_months}} mois ou +
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Divider -->
|
||
<tr><td style="padding:0 36px;"><div style="border-top:1px solid #eef0ee;"></div></td></tr>
|
||
|
||
<!-- Option 1 chip -->
|
||
<tr>
|
||
<td style="padding:22px 36px 10px;">
|
||
<span style="display:inline-block; background:#E6F9EE; color:#00C853; font-size:0.82rem; font-weight:700; padding:5px 12px; border-radius:6px;">
|
||
✅ Option 1
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Big green CTA card -->
|
||
<tr>
|
||
<td style="padding:0 36px 8px;">
|
||
<a href="{{gift_url}}" style="text-decoration:none; color:#ffffff; display:block;">
|
||
<!-- CTA card — gradient Targo officiel (135deg, #00C853 → #005026).
|
||
Outlook desktop will ignore the gradient and render the
|
||
solid #00C853 fallback (the gradient is the bgcolor's
|
||
fallback in nodemailer rendering). Acceptable degradation. -->
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0"
|
||
bgcolor="#00C853"
|
||
style="background:#00C853; background-image:linear-gradient(135deg,#00C853 0%,#005026 100%); border-radius:12px;">
|
||
<tr>
|
||
<td style="padding:30px 24px; text-align:center;">
|
||
<div style="font-family:'Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:2.2rem; font-weight:700; line-height:1; margin-bottom:14px; color:#ffffff;">
|
||
🎁 {{amount}}
|
||
</div>
|
||
<div style="font-size:1.08rem; font-weight:700; color:#ffffff;">
|
||
Activer ma carte-cadeau
|
||
</div>
|
||
<div style="font-size:0.85rem; opacity:0.9; margin-top:8px; color:#ffffff;">
|
||
Choisir ma carte sur Giftbit →
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</a>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Prorata refund disclaimer -->
|
||
<tr>
|
||
<td style="padding:10px 36px 22px;">
|
||
<div style="font-size:0.85rem; color:#6b7280;">
|
||
🪂 En cas de départ avant {{commitment_months}} mois, le prorata du montant est remboursable.
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Divider -->
|
||
<tr><td style="padding:0 36px;"><div style="border-top:1px solid #eef0ee;"></div></td></tr>
|
||
|
||
<!-- Option 2 chip -->
|
||
<tr>
|
||
<td style="padding:22px 36px 8px;">
|
||
<span style="display:inline-block; background:#F5FAF7; color:#6b7280; font-size:0.82rem; font-weight:700; padding:5px 12px; border-radius:6px;">
|
||
⏭️ Option 2
|
||
</span>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:0 36px 22px;">
|
||
<div style="font-size:0.97rem; color:#4b5563; line-height:1.55;">
|
||
Ne rien faire. Ton abonnement mensuel se poursuit normalement,
|
||
sans engagement ni carte-cadeau.
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
{{#expiry}}
|
||
<!-- Optional expiry callout -->
|
||
<tr><td style="padding:0 36px;"><div style="border-top:1px solid #eef0ee;"></div></td></tr>
|
||
<tr>
|
||
<td style="padding:18px 36px 0;">
|
||
<div style="font-size:0.85rem; color:#9ca3af;">
|
||
⏰ Cette offre expire le <strong style="color:#374151;">{{expiry}}</strong>.
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
{{/expiry}}
|
||
|
||
<!-- Divider -->
|
||
<tr><td style="padding:18px 36px 0;"><div style="border-top:1px solid #eef0ee;"></div></td></tr>
|
||
|
||
<!-- Signature -->
|
||
<tr>
|
||
<td style="padding:22px 36px 28px;">
|
||
<div style="font-size:0.97rem; color:#1B2E24;">
|
||
🤝 Merci de faire rouler l'économie de notre région avec nous !
|
||
</div>
|
||
<div style="font-size:0.9rem; color:#6b7280; margin-top:6px;">
|
||
L'équipe TARGO
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
</table>
|
||
|
||
<!-- Merchant brands grid — 4 cols × 3 rows = 12 logos
|
||
TO SWAP TO MAILJET-HOSTED LOGOS:
|
||
Replace each placeholder src URL below with the Mailjet CDN URL
|
||
you already have (same format as the TARGO logo:
|
||
https://xqy3m.mjt.lu/img2/xqy3m/<UUID>/content). The alt= attribute
|
||
stays as-is (used by screen readers + shown when images blocked).
|
||
Brand list in order: Amazon, IGA, Tim Hortons, $1 Plus (Dollarama),
|
||
Pizza Pizza, Home Depot, Best Buy, Walmart,
|
||
Petro-Canada, Esso, Home Hardware, Sobeys.
|
||
-->
|
||
<table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0"
|
||
style="max-width:600px; margin-top:8px;">
|
||
<tr>
|
||
<td style="padding:24px 36px 12px; text-align:center;">
|
||
<div style="font-size:1.02rem; font-weight:700; color:#00C853;">
|
||
Quelques exemples de choix pour votre carte cadeau :
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:0 28px 8px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
|
||
<!-- Row 1 — real Mailjet-hosted logos -->
|
||
<tr>
|
||
<td width="25%" style="padding:4px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
|
||
<tr><td align="center" valign="middle" height="92" style="height:92px;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/31ffdf91-d2de-4ced-8b99-ad2221695abe/content" alt="Amazon" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
<td width="25%" style="padding:4px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
|
||
<tr><td align="center" valign="middle" height="92" style="height:92px;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/9c9dfa18-2a3a-414a-b5ad-16d490c961b5/content" alt="IGA" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
<td width="25%" style="padding:4px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
|
||
<tr><td align="center" valign="middle" height="92" style="height:92px;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/4b0b2a4a-5f99-416c-8873-8d3e4389b6f7/content" alt="Tim Hortons" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
<td width="25%" style="padding:4px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
|
||
<tr><td align="center" valign="middle" height="92" style="height:92px;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/162b988c-beb7-49b3-b85e-ccc12fa2c155/content" alt="$1 Plus" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
<!-- Row 2 — Mailjet-hosted brand logos (sourced from user's Passport template) -->
|
||
<tr>
|
||
<td width="25%" style="padding:4px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
|
||
<tr><td align="center" valign="middle" height="92" style="height:92px;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/ef3b15eb-ec08-4551-ae27-ce249688185a/content" alt="Pizza Pizza" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
<td width="25%" style="padding:4px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
|
||
<tr><td align="center" valign="middle" height="92" style="height:92px;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/b8d3db5a-d39e-43ce-a84a-2f5dddbf0192/content" alt="Home Depot" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
<td width="25%" style="padding:4px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
|
||
<tr><td align="center" valign="middle" height="92" style="height:92px;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/cb965d5a-3e92-4f16-9e5c-b4939ce3cb91/content" alt="Best Buy" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
<td width="25%" style="padding:4px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
|
||
<tr><td align="center" valign="middle" height="92" style="height:92px;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/14df433d-583c-4602-a403-d47ee84966a6/content" alt="Walmart" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
<!-- Row 3 — Mailjet-hosted brand logos -->
|
||
<tr>
|
||
<td width="25%" style="padding:4px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
|
||
<tr><td align="center" valign="middle" height="92" style="height:92px;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/36775a32-434a-41e1-bb7a-ec7b768e5ba0/content" alt="Petro-Canada" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
<td width="25%" style="padding:4px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
|
||
<tr><td align="center" valign="middle" height="92" style="height:92px;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/ff95b593-8ba3-4e57-9f01-f46cf0a2b33f/content" alt="Esso" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
<td width="25%" style="padding:4px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
|
||
<tr><td align="center" valign="middle" height="92" style="height:92px;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/a1e5f032-a192-4499-97ba-53b939712fa9/content" alt="Home Hardware" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
<td width="25%" style="padding:4px;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
|
||
<tr><td align="center" valign="middle" height="92" style="height:92px;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/67bd791a-18c7-4d65-a77a-64c86cecc2b1/content" alt="Sobeys" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<!-- "Pourquoi cet email" + coordonnées officielles (per brand guide §11) -->
|
||
<table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0"
|
||
style="max-width:600px;">
|
||
<tr>
|
||
<td style="padding:18px 36px 8px; text-align:center;">
|
||
<div style="font-size:0.78rem; color:#64748B; line-height:1.55;">
|
||
Tu reçois ce courriel parce que tu es client(e) TARGO à
|
||
<strong style="color:#1B2E24;">{{description}}</strong>.<br>
|
||
Une question ? Écris-nous à
|
||
<a href="mailto:support@targo.ca" style="color:#00C853; text-decoration:none;">support@targo.ca</a>
|
||
ou appelle au
|
||
<a href="tel:5144480773" style="color:#00C853; text-decoration:none;">514 448-0773</a>
|
||
/ <a href="tel:18558882746" style="color:#00C853; text-decoration:none;">1 855 888-2746</a>.
|
||
Support 7j/7.
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<!-- Dark footer band — logo TARGO blanc (fond sombre, per brand guide §1)
|
||
+ adresse + copyright. Pas de slogan ni de wordmark stylisé en
|
||
CSS — on utilise le vrai logo image (variante blanche, "fonds
|
||
sombres" du brand guide).
|
||
TODO: la première fois, uploader targo-logo-white.svg/png via
|
||
l'éditeur de template → /campaigns/assets/upload, puis remplacer
|
||
la `src` ci-dessous par l'URL retournée. En attendant on utilise
|
||
le logo green qui se voit OK sur fond sombre (suffisant pour
|
||
test) mais pas pixel-perfect avec le guide. -->
|
||
<table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0"
|
||
style="max-width:600px; margin-top:12px; background:#1C1E26; border-radius:12px; overflow:hidden;">
|
||
<tr>
|
||
<td style="padding:26px 36px 22px; text-align:center;">
|
||
<img src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content"
|
||
alt="TARGO" width="120"
|
||
style="display:inline-block; border:0; outline:none; text-decoration:none; max-width:120px; height:auto;">
|
||
<div style="font-size:0.7rem; color:rgba(255,255,255,0.45); margin-top:18px; line-height:1.55;">
|
||
<a href="https://www.targo.ca" style="color:rgba(255,255,255,0.7); text-decoration:none;">www.targo.ca</a>
|
||
· 1867 ch. de la rivière, Ste-Clotilde, QC<br>
|
||
© {{year}} TARGO Communications · Tous droits réservés.
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
</body>
|
||
</html>
|