louis/gigafibre-fsm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(campaigns/templates): add gift-email-{fr,en}-simple variants

Browse Source 
Flat single-table-per-section structure (max 1 level of nesting) so that
GrapesJS' preset-newsletter parser can recognize each section as an
editable component. Same brand visuals + content as the rich variants,
but: dropped the 12-logo merchant grid (heaviest part for the editor),
compacted the three info pills into one consolidated card.

Sections (top-level <table width="600">):
  1. Header logo
  2. Greeting + brand-line + offer intro
  3. Compact info card (was 3 pills)
  4. Option 1 chip
  5. Big green CTA button
  6. Prorata refund disclaimer
  7. Option 2 chip + text
  8. Optional expiry notice (Mustache conditional)
  9. Signature
 10. Contact info (outside card)
 11. Dark footer band (logo + address + copyright)

Each section is a standalone <table role="presentation" width="600">
sharing the same #ffffff background. The first and last get the rounded
border-radius, middle sections have no rounding. Result: visually one
unified card, structurally many editable blocks.

Registered both new variants in EDITABLE_TEMPLATES whitelist so the
ops UI editor picks them up. Rich variants gift-email-fr.html and
gift-email-en.html are unchanged — both styles coexist. User compares
in the editor and picks which to standardize on per campaign.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
louispaulb 2026-05-21 22:04:39 -04:00
parent bbd2b31761
commit 1af8b3a029
5 changed files with 630 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

155
scripts/campaigns/templates/gift-email-en-simple.html Normal file
View File

@ -0,0 +1,155 @@
<!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 via Google Fonts. Outlook desktop skips this (MSO conditional)
and falls back to Helvetica/Arial through the font-family stack. -->
<!--[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>
<!-- ──────────────────────────────────────────────────────────────────────────
SIMPLE-STACK email template — each <section> is one independent table.
Designed to parse cleanly in GrapesJS-preset-newsletter so you can edit
visually in the ops UI editor. Max 1 level of table nesting per section.
Vertically-stacked tables share background colors to appear as one card.
────────────────────────────────────────────────────────────────────── -->
<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;">
<!-- Outer centering wrapper (not part of the editable content) -->
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="background:#F5FAF7;">
<tr><td align="center" style="padding:32px 16px;">
<!-- ════════ SECTION 1: Header logo ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border:1px solid #e5e7eb;border-bottom:none;border-radius:12px 12px 0 0;">
<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>
</table>
<!-- ════════ SECTION 2: Greeting + brand line ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:26px 36px 18px;">
<p style="margin:0 0 14px;font-size:1rem;color:#374151;">Hi {{firstname}},</p>
<p style="margin:0 0 14px;font-size:1.08rem;color:#1B2E24;font-weight:500;">
Just like you, we love stable connections and lasting relationships.
</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>
</table>
<!-- ════════ SECTION 3: Compact info block (3 pills → 1 card) ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:0 36px 22px;">
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="background:#F5FAF7;border-radius:10px;">
<tr><td style="padding:18px 22px;">
<p style="margin:0 0 8px;font-size:1rem;font-weight:700;color:#1B2E24;">🎁 {{amount}} at hundreds of brands</p>
<p style="margin:0 0 4px;font-size:0.92rem;color:#64748B;">⚡ Instant on activation</p>
<p style="margin:0;font-size:0.92rem;color:#64748B;">🤝 Stay with us {{commitment_months}}+ months</p>
</td></tr>
</table>
</td></tr>
</table>
<!-- ════════ SECTION 4: Option 1 chip ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:18px 36px 8px;border-top:1px solid #eef0ee;">
<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>
</table>
<!-- ════════ SECTION 5: Big green CTA button ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:8px 36px;">
<a href="{{gift_url}}" style="display:block;text-decoration:none;background:#00C853;background-image:linear-gradient(135deg,#00C853 0%,#005026 100%);border-radius:12px;padding:30px 24px;text-align:center;color:#ffffff;">
<span style="display:block;font-family:'Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:2.2rem;font-weight:700;line-height:1;color:#ffffff;">🎁&nbsp;&nbsp;{{amount}}</span>
<span style="display:block;margin-top:14px;font-size:1.08rem;font-weight:700;color:#ffffff;">Redeem my gift card</span>
<span style="display:block;margin-top:6px;font-size:0.85rem;color:#ffffff;opacity:0.9;">Pick your brand on Giftbit →</span>
</a>
</td></tr>
</table>
<!-- ════════ SECTION 6: Prorata refund disclaimer ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:10px 36px 22px;">
<p style="margin:0;font-size:0.85rem;color:#6b7280;">
🪂 If you leave before {{commitment_months}} months, the prorated amount is refundable.
</p>
</td></tr>
</table>
<!-- ════════ SECTION 7: Option 2 chip + text ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:18px 36px 6px;border-top:1px solid #eef0ee;">
<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>
</table>
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:6px 36px 22px;">
<p style="margin:0;font-size:0.97rem;color:#4b5563;line-height:1.55;">
Do nothing. Your monthly subscription continues as usual — no commitment, no gift card.
</p>
</td></tr>
</table>
{{#expiry}}
<!-- ════════ SECTION 8 (optional): Expiry notice ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:14px 36px 0;border-top:1px solid #eef0ee;">
<p style="margin:0;font-size:0.85rem;color:#9ca3af;">
⏰ This offer expires on <strong style="color:#374151;">{{expiry}}</strong>.
</p>
</td></tr>
</table>
{{/expiry}}
<!-- ════════ SECTION 9: Signature ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;border-radius:0 0 12px 12px;">
<tr><td style="padding:18px 36px 28px;border-top:1px solid #eef0ee;">
<p style="margin:0;font-size:0.97rem;color:#1B2E24;">🤝 Thanks for helping our regional economy thrive!</p>
<p style="margin:8px 0 0;font-size:0.9rem;color:#64748B;">The TARGO team</p>
</td></tr>
</table>
<!-- ════════ SECTION 10: Contact info (outside card) ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;">
<tr><td style="padding:18px 36px 8px;text-align:center;">
<p style="margin:0;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&nbsp;448-0773</a>.
Support&nbsp;7&nbsp;days/week.
</p>
</td></tr>
</table>
<!-- ════════ SECTION 11: Dark footer band ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#1C1E26;border-radius:12px;margin-top:12px;">
<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;">
<p style="margin:18px 0 0;font-size:0.7rem;color:rgba(255,255,255,0.45);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>
&nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br>
© {{year}} TARGO Communications · All rights reserved.
</p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>

155
scripts/campaigns/templates/gift-email-fr-simple.html Normal file
View File

@ -0,0 +1,155 @@
<!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 via Google Fonts. Outlook desktop skips this (MSO conditional)
and falls back to Helvetica/Arial through the font-family stack. -->
<!--[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>
<!-- ──────────────────────────────────────────────────────────────────────────
SIMPLE-STACK email template — each <section> is one independent table.
Designed to parse cleanly in GrapesJS-preset-newsletter so you can edit
visually in the ops UI editor. Max 1 level of table nesting per section.
Vertically-stacked tables share background colors to appear as one card.
────────────────────────────────────────────────────────────────────── -->
<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;">
<!-- Outer centering wrapper (not part of the editable content) -->
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="background:#F5FAF7;">
<tr><td align="center" style="padding:32px 16px;">
<!-- ════════ SECTION 1: Header logo ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border:1px solid #e5e7eb;border-bottom:none;border-radius:12px 12px 0 0;">
<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>
</table>
<!-- ════════ SECTION 2: Greeting + brand line ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:26px 36px 18px;">
<p style="margin:0 0 14px;font-size:1rem;color:#374151;">Bonjour {{firstname}},</p>
<p style="margin:0 0 14px;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>
</table>
<!-- ════════ SECTION 3: Compact info block (3 pills → 1 card) ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:0 36px 22px;">
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="background:#F5FAF7;border-radius:10px;">
<tr><td style="padding:18px 22px;">
<p style="margin:0 0 8px;font-size:1rem;font-weight:700;color:#1B2E24;">🎁 {{amount}} chez des centaines de marques</p>
<p style="margin:0 0 4px;font-size:0.92rem;color:#64748B;">⚡ Instantané à l'activation</p>
<p style="margin:0;font-size:0.92rem;color:#64748B;">🤝 Rester encore {{commitment_months}} mois ou +</p>
</td></tr>
</table>
</td></tr>
</table>
<!-- ════════ SECTION 4: Option 1 chip ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:18px 36px 8px;border-top:1px solid #eef0ee;">
<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>
</table>
<!-- ════════ SECTION 5: Big green CTA button ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:8px 36px;">
<a href="{{gift_url}}" style="display:block;text-decoration:none;background:#00C853;background-image:linear-gradient(135deg,#00C853 0%,#005026 100%);border-radius:12px;padding:30px 24px;text-align:center;color:#ffffff;">
<span style="display:block;font-family:'Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:2.2rem;font-weight:700;line-height:1;color:#ffffff;">🎁&nbsp;&nbsp;{{amount}}</span>
<span style="display:block;margin-top:14px;font-size:1.08rem;font-weight:700;color:#ffffff;">Activer ma carte-cadeau</span>
<span style="display:block;margin-top:6px;font-size:0.85rem;color:#ffffff;opacity:0.9;">Choisir ma carte sur Giftbit →</span>
</a>
</td></tr>
</table>
<!-- ════════ SECTION 6: Prorata refund disclaimer ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:10px 36px 22px;">
<p style="margin:0;font-size:0.85rem;color:#6b7280;">
🪂 En cas de départ avant {{commitment_months}} mois, le prorata du montant est remboursable.
</p>
</td></tr>
</table>
<!-- ════════ SECTION 7: Option 2 chip + text ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:18px 36px 6px;border-top:1px solid #eef0ee;">
<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>
</table>
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:6px 36px 22px;">
<p style="margin:0;font-size:0.97rem;color:#4b5563;line-height:1.55;">
Ne rien faire. Ton abonnement mensuel se poursuit normalement, sans engagement ni carte-cadeau.
</p>
</td></tr>
</table>
{{#expiry}}
<!-- ════════ SECTION 8 (optional): Expiry notice ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:14px 36px 0;border-top:1px solid #eef0ee;">
<p style="margin:0;font-size:0.85rem;color:#9ca3af;">
⏰ Cette offre expire le <strong style="color:#374151;">{{expiry}}</strong>.
</p>
</td></tr>
</table>
{{/expiry}}
<!-- ════════ SECTION 9: Signature ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;border-radius:0 0 12px 12px;">
<tr><td style="padding:18px 36px 28px;border-top:1px solid #eef0ee;">
<p style="margin:0;font-size:0.97rem;color:#1B2E24;">🤝 Merci de faire rouler l'économie de notre région avec nous !</p>
<p style="margin:8px 0 0;font-size:0.9rem;color:#64748B;">L'équipe TARGO</p>
</td></tr>
</table>
<!-- ════════ SECTION 10: Contact info (outside card) ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;">
<tr><td style="padding:18px 36px 8px;text-align:center;">
<p style="margin:0;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 à
<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&nbsp;448-0773</a>.
Support&nbsp;7j/7.
</p>
</td></tr>
</table>
<!-- ════════ SECTION 11: Dark footer band ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#1C1E26;border-radius:12px;margin-top:12px;">
<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;">
<p style="margin:18px 0 0;font-size:0.7rem;color:rgba(255,255,255,0.45);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>
&nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br>
© {{year}} TARGO Communications · Tous droits réservés.
</p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>

13
services/targo-hub/lib/campaigns.js
View File

@ -645,9 +645,16 @@ const TEMPLATES_DIR = path.resolve(__dirname, '..', 'templates')
const DEFAULT_TEMPLATE = path.join(TEMPLATES_DIR, 'gift-email-fr.html')
// Allow-list templates that can be edited via the API. Naming convention:
// gift-email-<lang> — the recipient's language drives which one gets used
// at send time. Adding a new lang = drop a new .html here + add to this list.
const EDITABLE_TEMPLATES = ['gift-email-fr', 'gift-email-en']
// gift-email-<lang>[-variant] — the recipient's language drives which one
// gets used at send time. `-simple` variants are flat-structured copies
// designed to parse cleanly in GrapesJS visual editor (no nested tables).
// Adding a new lang or variant = drop a new .html here + add to this list.
const EDITABLE_TEMPLATES = [
'gift-email-fr',
'gift-email-en',
'gift-email-fr-simple',
'gift-email-en-simple',
]
// Resolve the template path for a given recipient language. Falls back to
// the French version (most of the customer base) if the language-specific

155
services/targo-hub/templates/gift-email-en-simple.html Normal file
View File

@ -0,0 +1,155 @@
<!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 via Google Fonts. Outlook desktop skips this (MSO conditional)
and falls back to Helvetica/Arial through the font-family stack. -->
<!--[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>
<!-- ──────────────────────────────────────────────────────────────────────────
SIMPLE-STACK email template — each <section> is one independent table.
Designed to parse cleanly in GrapesJS-preset-newsletter so you can edit
visually in the ops UI editor. Max 1 level of table nesting per section.
Vertically-stacked tables share background colors to appear as one card.
────────────────────────────────────────────────────────────────────── -->
<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;">
<!-- Outer centering wrapper (not part of the editable content) -->
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="background:#F5FAF7;">
<tr><td align="center" style="padding:32px 16px;">
<!-- ════════ SECTION 1: Header logo ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border:1px solid #e5e7eb;border-bottom:none;border-radius:12px 12px 0 0;">
<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>
</table>
<!-- ════════ SECTION 2: Greeting + brand line ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:26px 36px 18px;">
<p style="margin:0 0 14px;font-size:1rem;color:#374151;">Hi {{firstname}},</p>
<p style="margin:0 0 14px;font-size:1.08rem;color:#1B2E24;font-weight:500;">
Just like you, we love stable connections and lasting relationships.
</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>
</table>
<!-- ════════ SECTION 3: Compact info block (3 pills → 1 card) ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:0 36px 22px;">
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="background:#F5FAF7;border-radius:10px;">
<tr><td style="padding:18px 22px;">
<p style="margin:0 0 8px;font-size:1rem;font-weight:700;color:#1B2E24;">🎁 {{amount}} at hundreds of brands</p>
<p style="margin:0 0 4px;font-size:0.92rem;color:#64748B;">⚡ Instant on activation</p>
<p style="margin:0;font-size:0.92rem;color:#64748B;">🤝 Stay with us {{commitment_months}}+ months</p>
</td></tr>
</table>
</td></tr>
</table>
<!-- ════════ SECTION 4: Option 1 chip ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:18px 36px 8px;border-top:1px solid #eef0ee;">
<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>
</table>
<!-- ════════ SECTION 5: Big green CTA button ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:8px 36px;">
<a href="{{gift_url}}" style="display:block;text-decoration:none;background:#00C853;background-image:linear-gradient(135deg,#00C853 0%,#005026 100%);border-radius:12px;padding:30px 24px;text-align:center;color:#ffffff;">
<span style="display:block;font-family:'Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:2.2rem;font-weight:700;line-height:1;color:#ffffff;">🎁&nbsp;&nbsp;{{amount}}</span>
<span style="display:block;margin-top:14px;font-size:1.08rem;font-weight:700;color:#ffffff;">Redeem my gift card</span>
<span style="display:block;margin-top:6px;font-size:0.85rem;color:#ffffff;opacity:0.9;">Pick your brand on Giftbit →</span>
</a>
</td></tr>
</table>
<!-- ════════ SECTION 6: Prorata refund disclaimer ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:10px 36px 22px;">
<p style="margin:0;font-size:0.85rem;color:#6b7280;">
🪂 If you leave before {{commitment_months}} months, the prorated amount is refundable.
</p>
</td></tr>
</table>
<!-- ════════ SECTION 7: Option 2 chip + text ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:18px 36px 6px;border-top:1px solid #eef0ee;">
<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>
</table>
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:6px 36px 22px;">
<p style="margin:0;font-size:0.97rem;color:#4b5563;line-height:1.55;">
Do nothing. Your monthly subscription continues as usual — no commitment, no gift card.
</p>
</td></tr>
</table>
{{#expiry}}
<!-- ════════ SECTION 8 (optional): Expiry notice ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:14px 36px 0;border-top:1px solid #eef0ee;">
<p style="margin:0;font-size:0.85rem;color:#9ca3af;">
⏰ This offer expires on <strong style="color:#374151;">{{expiry}}</strong>.
</p>
</td></tr>
</table>
{{/expiry}}
<!-- ════════ SECTION 9: Signature ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;border-radius:0 0 12px 12px;">
<tr><td style="padding:18px 36px 28px;border-top:1px solid #eef0ee;">
<p style="margin:0;font-size:0.97rem;color:#1B2E24;">🤝 Thanks for helping our regional economy thrive!</p>
<p style="margin:8px 0 0;font-size:0.9rem;color:#64748B;">The TARGO team</p>
</td></tr>
</table>
<!-- ════════ SECTION 10: Contact info (outside card) ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;">
<tr><td style="padding:18px 36px 8px;text-align:center;">
<p style="margin:0;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&nbsp;448-0773</a>.
Support&nbsp;7&nbsp;days/week.
</p>
</td></tr>
</table>
<!-- ════════ SECTION 11: Dark footer band ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#1C1E26;border-radius:12px;margin-top:12px;">
<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;">
<p style="margin:18px 0 0;font-size:0.7rem;color:rgba(255,255,255,0.45);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>
&nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br>
© {{year}} TARGO Communications · All rights reserved.
</p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>

155
services/targo-hub/templates/gift-email-fr-simple.html Normal file
View File

@ -0,0 +1,155 @@
<!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 via Google Fonts. Outlook desktop skips this (MSO conditional)
and falls back to Helvetica/Arial through the font-family stack. -->
<!--[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>
<!-- ──────────────────────────────────────────────────────────────────────────
SIMPLE-STACK email template — each <section> is one independent table.
Designed to parse cleanly in GrapesJS-preset-newsletter so you can edit
visually in the ops UI editor. Max 1 level of table nesting per section.
Vertically-stacked tables share background colors to appear as one card.
────────────────────────────────────────────────────────────────────── -->
<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;">
<!-- Outer centering wrapper (not part of the editable content) -->
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="background:#F5FAF7;">
<tr><td align="center" style="padding:32px 16px;">
<!-- ════════ SECTION 1: Header logo ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border:1px solid #e5e7eb;border-bottom:none;border-radius:12px 12px 0 0;">
<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>
</table>
<!-- ════════ SECTION 2: Greeting + brand line ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:26px 36px 18px;">
<p style="margin:0 0 14px;font-size:1rem;color:#374151;">Bonjour {{firstname}},</p>
<p style="margin:0 0 14px;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>
</table>
<!-- ════════ SECTION 3: Compact info block (3 pills → 1 card) ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:0 36px 22px;">
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="background:#F5FAF7;border-radius:10px;">
<tr><td style="padding:18px 22px;">
<p style="margin:0 0 8px;font-size:1rem;font-weight:700;color:#1B2E24;">🎁 {{amount}} chez des centaines de marques</p>
<p style="margin:0 0 4px;font-size:0.92rem;color:#64748B;">⚡ Instantané à l'activation</p>
<p style="margin:0;font-size:0.92rem;color:#64748B;">🤝 Rester encore {{commitment_months}} mois ou +</p>
</td></tr>
</table>
</td></tr>
</table>
<!-- ════════ SECTION 4: Option 1 chip ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:18px 36px 8px;border-top:1px solid #eef0ee;">
<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>
</table>
<!-- ════════ SECTION 5: Big green CTA button ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:8px 36px;">
<a href="{{gift_url}}" style="display:block;text-decoration:none;background:#00C853;background-image:linear-gradient(135deg,#00C853 0%,#005026 100%);border-radius:12px;padding:30px 24px;text-align:center;color:#ffffff;">
<span style="display:block;font-family:'Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:2.2rem;font-weight:700;line-height:1;color:#ffffff;">🎁&nbsp;&nbsp;{{amount}}</span>
<span style="display:block;margin-top:14px;font-size:1.08rem;font-weight:700;color:#ffffff;">Activer ma carte-cadeau</span>
<span style="display:block;margin-top:6px;font-size:0.85rem;color:#ffffff;opacity:0.9;">Choisir ma carte sur Giftbit →</span>
</a>
</td></tr>
</table>
<!-- ════════ SECTION 6: Prorata refund disclaimer ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:10px 36px 22px;">
<p style="margin:0;font-size:0.85rem;color:#6b7280;">
🪂 En cas de départ avant {{commitment_months}} mois, le prorata du montant est remboursable.
</p>
</td></tr>
</table>
<!-- ════════ SECTION 7: Option 2 chip + text ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:18px 36px 6px;border-top:1px solid #eef0ee;">
<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>
</table>
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:6px 36px 22px;">
<p style="margin:0;font-size:0.97rem;color:#4b5563;line-height:1.55;">
Ne rien faire. Ton abonnement mensuel se poursuit normalement, sans engagement ni carte-cadeau.
</p>
</td></tr>
</table>
{{#expiry}}
<!-- ════════ SECTION 8 (optional): Expiry notice ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:14px 36px 0;border-top:1px solid #eef0ee;">
<p style="margin:0;font-size:0.85rem;color:#9ca3af;">
⏰ Cette offre expire le <strong style="color:#374151;">{{expiry}}</strong>.
</p>
</td></tr>
</table>
{{/expiry}}
<!-- ════════ SECTION 9: Signature ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;border-radius:0 0 12px 12px;">
<tr><td style="padding:18px 36px 28px;border-top:1px solid #eef0ee;">
<p style="margin:0;font-size:0.97rem;color:#1B2E24;">🤝 Merci de faire rouler l'économie de notre région avec nous !</p>
<p style="margin:8px 0 0;font-size:0.9rem;color:#64748B;">L'équipe TARGO</p>
</td></tr>
</table>
<!-- ════════ SECTION 10: Contact info (outside card) ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;">
<tr><td style="padding:18px 36px 8px;text-align:center;">
<p style="margin:0;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 à
<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&nbsp;448-0773</a>.
Support&nbsp;7j/7.
</p>
</td></tr>
</table>
<!-- ════════ SECTION 11: Dark footer band ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#1C1E26;border-radius:12px;margin-top:12px;">
<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;">
<p style="margin:18px 0 0;font-size:0.7rem;color:rgba(255,255,255,0.45);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>
&nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br>
© {{year}} TARGO Communications · Tous droits réservés.
</p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>