d6096fe1f8
Brand audit against the official guide (Feb 2026 v1.0) caught several inconsistencies in the email template: - Wrong primary green: was #019547, should be #00C853 (Targo Green from brand palette). Globally replaced. - Wrong gradient: was #019547→#06a04d, should be 135deg #00C853→#005026 (the official Gradient Targo from the brand). Now using Outlook-safe background-image + bgcolor fallback for solid green on Outlook desktop. - Wrong contact info: facturation@targointernet.com / 514 242-1500 → support@targo.ca / 514 448-0773 / 1 855 888-2746 (per §11 of guide). - Wrong website: targointernet.com + gigafibre.ca → www.targo.ca. - Missing slogan + green dot: footer now ends with the trademark tagline "Services de confiance, tout-en-un, près de chez vous." with the obligatory green period (always FR — it's the trademark, not a marketing line, so stays untranslated in EN template too). - Missing brand fonts: added Space Grotesk (display) + Plus Jakarta Sans (body) via Google Fonts. Wrapped in MSO conditional comments so Outlook desktop skips the request and falls back to Helvetica via the explicit font-family stack on every element. - Wrong body bg / text colors: now #F5FAF7 (Muted) / #1B2E24 (Foreground) per brand semantic palette. - Wrong info-pill bg: was #f3f4f3 → #F5FAF7 (Muted). - Added official dark footer band #1C1E26 (Targo Dark) with white inverted wordmark, slogan, address, copyright. Multilang routing (FR/EN): - lib/campaigns.js matchCustomer now fetches Customer.language (14k FR / 1k EN distribution confirmed on prod). Default 'fr' for unmatched contacts. - New templateForLanguage(lang) helper picks gift-email-<lang>.html, falls back to FR. Resolves 'fr-CA' → 'fr' etc. - sendCampaignAsync pre-loads templates per recipient with an in-memory cache to avoid re-reading from disk on every send. - gift-email-en.html created — English translation of the full FR template, keeping the slogan in French (it's the trademark tagline). - year variable now injected (replaces hardcoded © year). UI (CampaignNewPage): - New "Langue" column in the Step 2 recipient table. Shows a clickable chip (FR primary green / EN blue-grey) that toggles language inline, so a campaign manager can override the ERPNext-resolved language per recipient. - Step 3 recap now shows "Répartition par langue: 145 × FR, 12 × EN" before confirming the send. Spell-check: - TemplateEditorPage HTML mode now has spellcheck="true" + dynamic lang attribute on the textarea, picked from the template name suffix (gift-email-fr → fr, gift-email-en → en). Browser's native dictionary flags typos in real time. AI-grade rewrites deferred to the future /campaigns/ai/rewrite endpoint discussed previously. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
356 lines
19 KiB
HTML
356 lines
19 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>An exclusive offer from 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;">Hi {{firstname}},</p>
|
||
<p style="margin:0 0 10px; font-size:1.08rem; color:#1B2E24; font-weight:500;">
|
||
You went local — we want to say thanks.
|
||
</p>
|
||
<p style="margin:0; font-size:1rem; color:#374151;">
|
||
Summer's here, and so is your
|
||
<strong>limited-time exclusive offer</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;">
|
||
Digital gift card
|
||
</div>
|
||
<div style="font-size:1.05rem; font-weight:700; color:#1B2E24;">
|
||
🎁 {{amount}} at hundreds of brands
|
||
</div>
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
|
||
<!-- Two-column: DELIVERY + 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;">
|
||
Delivery
|
||
</div>
|
||
<div style="font-size:0.95rem; font-weight:700; color:#1B2E24;">
|
||
⚡ Instant on 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;">
|
||
🤝 Stay with us {{commitment_months}}+ months
|
||
</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;">
|
||
<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;">
|
||
Redeem my gift card
|
||
</div>
|
||
<div style="font-size:0.85rem; opacity:0.9; margin-top:8px; color:#ffffff;">
|
||
Pick your brand on 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;">
|
||
🪂 If you leave before {{commitment_months}} months, the prorated portion is refundable.
|
||
</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;">
|
||
Do nothing. Your monthly subscription continues as usual —
|
||
no commitment, no gift card.
|
||
</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;">
|
||
⏰ This offer expires on <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;">
|
||
🤝 Thanks for helping our regional economy thrive!
|
||
</div>
|
||
<div style="font-size:0.9rem; color:#6b7280; margin-top:6px;">
|
||
The TARGO team
|
||
</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 -->
|
||
<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>
|
||
|
||
<!-- "Why this email" + official contacts (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;">
|
||
You're getting this email because you're a TARGO customer at
|
||
<strong style="color:#1B2E24;">{{description}}</strong>.<br>
|
||
Got a question? Write to
|
||
<a href="mailto:support@targo.ca" style="color:#00C853; text-decoration:none;">support@targo.ca</a>
|
||
or call
|
||
<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 7 days/week.
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
<!-- Dark footer band — official slogan + inverted wordmark + address.
|
||
Slogan stays in French per brand identity (it's the trademark
|
||
tagline of the company, not a translatable marketing line). -->
|
||
<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;">
|
||
<div style="font-family:'Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:1.4rem; font-weight:700; letter-spacing:0.18em; color:#ffffff; line-height:1;">
|
||
TARGO<span style="color:#00C853;">.</span>
|
||
</div>
|
||
<div style="font-size:0.85rem; color:rgba(255,255,255,0.75); margin-top:10px;">
|
||
Services de confiance, tout-en-un, près de chez vous<span style="color:#00C853; font-weight:700;">.</span>
|
||
</div>
|
||
<div style="font-size:0.7rem; color:rgba(255,255,255,0.45); margin-top:14px; line-height:1.5;">
|
||
<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 · All rights reserved.
|
||
</div>
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
</td>
|
||
</tr>
|
||
</table>
|
||
|
||
</body>
|
||
</html>
|