9f2b37939d
- Template gift-email-fr.html: switch from Gigafibre indigo to TARGO green (#019547), use real Mailjet-hosted TARGO logo, adopt retention-offer layout from the latest mockup (tutoiement, Option 1/Option 2 split, prorata-refund disclaimer, "L'équipe TARGO" signature). Row 1 of the merchant grid uses real Mailjet logos (Amazon, IGA, Tim Hortons, $1 Plus); rows 2-3 are placehold.co until URLs are shared. - send_gift_campaign.js: add {{#var}}...{{/var}} Mustache section support to the renderer so the optional expiry block disappears cleanly when --expiry is omitted (was rendering literal tags before). Add new --commitment-months CLI flag (default 3) for the "Rester encore X mois ou +" wording. - setup_mailjet_webhook.js (new): one-shot Node script to register the Hub callback URL with Mailjet's /v3/REST/eventcallbackurl. Defaults to a safe event subset (open/click/spam/unsub) that doesn't conflict with the WP-Mail-SMTP integration already owning sent/bounce/blocked. --all forces full takeover with a conflict guard requiring --force-takeover to overwrite existing records. Supports --list and --delete for inspection / rollback. - package.json (new): nodemailer dependency for SMTP send. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
332 lines
18 KiB
HTML
332 lines
18 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>
|
||
</head>
|
||
<body style="margin:0; padding:0; background:#f7f8f7; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; color:#1f2937; 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:14px; 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:#1f2937; font-weight:500;">
|
||
Tu choisis local, on veut te remercier.
|
||
</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:#f3f4f3; 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:#1f2937;">
|
||
🎁 {{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:#f3f4f3; 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:#1f2937;">
|
||
⚡ Instantané à l'activation
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td width="50%" style="padding-left:5px; vertical-align:top;">
|
||
<div style="background:#f3f4f3; 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:#1f2937;">
|
||
🤝 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:#dcf4e3; color:#019547; 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;">
|
||
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0"
|
||
style="background:#019547; border-radius:14px;">
|
||
<tr>
|
||
<td style="padding:30px 24px; text-align:center;">
|
||
<div style="font-size:2.1rem; font-weight:800; 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:#f3f4f3; 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:#1f2937;">
|
||
🤝 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:#019547;">
|
||
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 -->
|
||
<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://placehold.co/160x90/ffffff/e7771a?text=Pizza+Pizza" alt="Pizza Pizza" width="120" style="max-width:120px; max-height:72px; 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://placehold.co/160x90/ffffff/f96302?text=Home+Depot" alt="Home Depot" width="120" style="max-width:120px; max-height:72px; 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://placehold.co/160x90/ffffff/000000?text=Best+Buy" alt="Best Buy" width="120" style="max-width:120px; max-height:72px; 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://placehold.co/160x90/ffffff/0071ce?text=Walmart" alt="Walmart" width="120" style="max-width:120px; max-height:72px; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
<!-- Row 3 -->
|
||
<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://placehold.co/160x90/ffffff/e1140a?text=Petro-Canada" alt="Petro-Canada" width="120" style="max-width:120px; max-height:72px; 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://placehold.co/160x90/ffffff/004b8d?text=Esso" alt="Esso" width="120" style="max-width:120px; max-height:72px; 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://placehold.co/160x90/ffffff/e6332a?text=Home+Hardware" alt="Home Hardware" width="120" style="max-width:120px; max-height:72px; 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://placehold.co/160x90/ffffff/4caf50?text=Sobeys" alt="Sobeys" width="120" style="max-width:120px; max-height:72px; display:inline-block; border:0;">
|
||
</td></tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<!-- Footer (outside the card, small print) -->
|
||
<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.75rem; color:#9ca3af; line-height:1.55;">
|
||
Tu reçois ce courriel parce que tu es client(e) TARGO à
|
||
<strong style="color:#6b7280;">{{description}}</strong>.<br>
|
||
Une question ? Écris-nous à
|
||
<a href="mailto:facturation@targointernet.com" style="color:#019547;">facturation@targointernet.com</a>
|
||
ou appelle au <a href="tel:5142421500" style="color:#019547;">514 242-1500</a>.
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
<tr>
|
||
<td style="padding:0 36px 28px; text-align:center;">
|
||
<div style="font-size:0.7rem; color:#9ca3af;">
|
||
<strong style="color:#019547; letter-spacing:0.08em;">TARGO</strong>
|
||
— Internet fibre optique au Québec — service <em>Gigafibre</em><br>
|
||
<a href="https://www.targointernet.com" style="color:#9ca3af; text-decoration:underline;">targointernet.com</a>
|
||
·
|
||
<a href="https://www.gigafibre.ca" style="color:#9ca3af; text-decoration:underline;">gigafibre.ca</a>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
</body>
|
||
</html>
|