feat(campaigns/templates): native-block reminder template (proof of concept)
Until now, every Unlayer-edited template stored as a single giant
"Custom HTML" block (~37 KB). The operator couldn't manipulate the
greeting, the CTA, or the expiry badge independently — they had to
edit raw HTML inside one block.
New scripts/build-native-template.js generates matched .json
(Unlayer design tree) + .html (compiled output) from a JS template
spec under scripts/templates-spec/. Each block becomes a separate
entry in the design tree with its own type:
- 9 text blocks : greeting, urgency, body, expiry, prorata,
Option 2 text, signature, contact, dark footer
- 2 image blocks : header logo, footer logo
- 1 button block : the CTA (🎁 {{amount}})
- 4 html blocks : view-in-browser, Option 1 chip, brand-logo
card, Option 2 chip (kept as raw HTML — too
custom for native equivalents)
gift-email-native-reminder-fr ships as the proof of concept:
- Compiled HTML: 30,867 bytes (vs 39,484 for the MJML-compiled
reminder-fr — saves 22%)
- JSON: 42,274 bytes (essentially same as before, but now broken into
16 individually-editable blocks instead of 1 monster Custom HTML)
What this unlocks in Unlayer:
- Click any text → font / color / size / padding / alignment in the
right panel
- Click the CTA → button-specific controls (corner radius, hover
color, padding)
- Drag-reorder blocks within the email
- Mobile preview reflects each block's responsive defaults
- Save a block to the personal library for reuse in other campaigns
Limitations on the 4 html blocks:
- Chips (Option 1 / Option 2) require raw HTML edit because the
rounded badge styling has no native equivalent
- Brand-logo strip needs precise inline img widths Unlayer can't set
Once the operator validates rendering across Gmail/Outlook/Apple
Mail, we'll port the rest: gift-email-fr/en + the existing reminder
templates can all migrate using the same build script.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
louispaulb
parent
8410464a22
commit
2919fa86af
343
scripts/campaigns/templates/gift-email-native-reminder-fr.html
Normal file
343
scripts/campaigns/templates/gift-email-native-reminder-fr.html
Normal file
|
|
@ -0,0 +1,343 @@
|
||||||
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
|
||||||
|
<head>
|
||||||
|
<!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="x-apple-disable-message-reformatting">
|
||||||
|
<!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
|
||||||
|
<style type="text/css">
|
||||||
|
@media only screen and (min-width: 620px) { .u-row { width: 600px !important; } .u-row .u-col { vertical-align: top; } .u-row .u-col-100 { width: 600px !important; } }
|
||||||
|
@media only screen and (max-width: 620px) {
|
||||||
|
.u-row-container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
|
||||||
|
.u-row { width: 100% !important; }
|
||||||
|
.u-row .u-col { display: block !important; width: 100% !important; min-width: 320px !important; max-width: 100% !important; }
|
||||||
|
.u-row .u-col > div { margin: 0 auto; }
|
||||||
|
}
|
||||||
|
body{margin:0;padding:0}table,td,tr{border-collapse:collapse;vertical-align:top}*{line-height:inherit}a[x-apple-data-detectors=true]{color:inherit!important;text-decoration:none!important}
|
||||||
|
table, td { color: #1B2E24; } #u_body a { color: #00C853; text-decoration: underline; }
|
||||||
|
</style>
|
||||||
|
<!--[if !mso]><!--><link href="https://fonts.googleapis.com/css?family=Plus+Jakarta+Sans:400,500,600,700" rel="stylesheet" type="text/css"><!--<![endif]-->
|
||||||
|
</head>
|
||||||
|
<body class="clean-body u_body" style="margin:0;padding:0;-webkit-text-size-adjust:100%;background-color:#F5FAF7;color:#1B2E24">
|
||||||
|
<!--[if IE]><div class="ie-container"><![endif]--><!--[if mso]><div class="mso-container"><![endif]-->
|
||||||
|
<table role="presentation" id="u_body" style="border-collapse:collapse;table-layout:fixed;border-spacing:0;mso-table-lspace:0pt;mso-table-rspace:0pt;vertical-align:top;min-width:320px;Margin:0 auto;background-color:#F5FAF7;width:100%" cellpadding="0" cellspacing="0">
|
||||||
|
<tbody>
|
||||||
|
<tr><td style="display:none !important;visibility:hidden;mso-hide:all;font-size:1px;color:#fff;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">Comme toi, on aime les connexions stables et les relations durables.</td></tr>
|
||||||
|
<tr style="vertical-align:top"><td style="word-break:break-word;border-collapse:collapse !important;vertical-align:top">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center" style="background-color:#F5FAF7;" bgcolor="#F5FAF7"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center"><tr><td><![endif]-->
|
||||||
|
<div aria-label="Une offre exclusive de TARGO" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#F5FAF7;">
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:8px 0 0;background-color:transparent;">
|
||||||
|
<div class="u-row" style="padding:8px 0 0;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:8px 0 0;background-color:transparent;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:transparent;"><tr><td style="padding:8px 0 0;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="padding:0;">
|
||||||
|
{{#view_url}}<div style="text-align:center;padding:4px 0;"><a href="{{view_url}}" style="font-family:Plus Jakarta Sans,sans-serif;font-size:11px;color:#94a3b8;text-decoration:underline;">Affichage incorrect ? Voir dans le navigateur</a></div>{{/view_url}}
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:#ffffff;">
|
||||||
|
<div class="u-row" style="border:1px solid #e5e7eb;border-radius:12px 12px 0 0;background:#ffffff;background-color:#ffffff;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:#ffffff;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:#ffffff;"><tr><td style="border:1px solid #e5e7eb;border-radius:12px 12px 0 0;background-color:#ffffff;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="padding:28px 36px 22px;text-align:center;" align="center">
|
||||||
|
<img alt="TARGO" src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content" width="140" style="display:block;border:0;height:auto;outline:none;text-decoration:none;width:140px;max-width:100%;" />
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:#ffffff;">
|
||||||
|
<div class="u-row" style="border:1px solid #e5e7eb;border-radius:0;background:#ffffff;background-color:#ffffff;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:#ffffff;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:#ffffff;"><tr><td style="border:1px solid #e5e7eb;border-radius:0;background-color:#ffffff;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:20px 36px 8px;font-family:'Plus Jakarta Sans', sans-serif;" align="left">
|
||||||
|
<div class="u_content_text" style="font-size:16px;font-weight:400;color:#374151;text-align:left;line-height:150%;">Petit rappel pour {{firstname}},</div>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:#ffffff;">
|
||||||
|
<div class="u-row" style="border:1px solid #e5e7eb;border-radius:0;background:#ffffff;background-color:#ffffff;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:#ffffff;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:#ffffff;"><tr><td style="border:1px solid #e5e7eb;border-radius:0;background-color:#ffffff;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:4px 36px 14px;font-family:'Plus Jakarta Sans', sans-serif;" align="left">
|
||||||
|
<div class="u_content_text" style="font-size:17px;font-weight:600;color:#1B2E24;text-align:left;line-height:150%;">🎁 Ton cadeau de {{amount}} reste disponible jusqu'au {{expires_at_date}}.</div>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:#ffffff;">
|
||||||
|
<div class="u-row" style="border:1px solid #e5e7eb;border-radius:0;background:#ffffff;background-color:#ffffff;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:#ffffff;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:#ffffff;"><tr><td style="border:1px solid #e5e7eb;border-radius:0;background-color:#ffffff;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:0 36px 18px;font-family:'Plus Jakarta Sans', sans-serif;" align="justify">
|
||||||
|
<div class="u_content_text" style="font-size:16px;font-weight:400;color:#374151;text-align:justify;line-height:150%;">On voulait juste s'assurer que tu ne l'as pas manqué. La carte-cadeau qu'on t'a envoyée pour te remercier peut s'utiliser chez des centaines de marques canadiennes, en quelques clics.<br/><br/>Si tu préfères ne pas l'utiliser, aucun souci, pas besoin de répondre à ce courriel.</div>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:#ffffff;">
|
||||||
|
<div class="u-row" style="border:1px solid #e5e7eb;border-radius:0;background:#ffffff;background-color:#ffffff;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:#ffffff;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:#ffffff;"><tr><td style="border:1px solid #e5e7eb;border-radius:0;background-color:#ffffff;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="padding:8px 36px 4px;">
|
||||||
|
<div style="font-family:Plus Jakarta Sans,sans-serif;font-size:16px;text-align:left;color:#1B2E24;"><span style="display:inline-block;background:#E6F9EE;color:#00C853;font-size:13px;font-weight:700;padding:5px 12px;border-radius:6px;">✅ Option 1</span></div>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:#ffffff;">
|
||||||
|
<div class="u-row" style="border:1px solid #e5e7eb;border-radius:0;background:#ffffff;background-color:#ffffff;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:#ffffff;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:#ffffff;"><tr><td style="border:1px solid #e5e7eb;border-radius:0;background-color:#ffffff;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="padding:0 36px 22px;">
|
||||||
|
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:separate;">
|
||||||
|
<tr><td style="background-color:#F5FAF7;border-radius:10px;padding:18px 22px;">
|
||||||
|
<div style="font-family:Plus Jakarta Sans,sans-serif;font-size:16px;font-weight:700;color:#1B2E24;line-height:1.5;">
|
||||||
|
🎁 {{amount}} chez des centaines de marques<br><br>
|
||||||
|
<span style="display:inline-block;">
|
||||||
|
<img src="https://xqy3m.mjt.lu/img2/xqy3m/4b0b2a4a-5f99-416c-8873-8d3e4389b6f7/content" width="32" alt="Tim Hortons" style="width:32px;max-width:32px;height:auto;display:inline-block;border:0;margin-right:6px;vertical-align:middle;">
|
||||||
|
<img src="https://xqy3m.mjt.lu/img2/xqy3m/14df433d-583c-4602-a403-d47ee84966a6/content" width="32" alt="Walmart" style="width:32px;max-width:32px;height:auto;display:inline-block;border:0;margin-right:6px;vertical-align:middle;">
|
||||||
|
<img src="https://xqy3m.mjt.lu/img2/xqy3m/b8d3db5a-d39e-43ce-a84a-2f5dddbf0192/content" width="32" alt="Home Depot" style="width:32px;max-width:32px;height:auto;display:inline-block;border:0;margin-right:6px;vertical-align:middle;">
|
||||||
|
<img src="https://xqy3m.mjt.lu/img2/xqy3m/9c9dfa18-2a3a-414a-b5ad-16d490c961b5/content" width="32" alt="IGA" style="width:32px;max-width:32px;height:auto;display:inline-block;border:0;margin-right:6px;vertical-align:middle;">
|
||||||
|
<img src="https://xqy3m.mjt.lu/img2/xqy3m/a1e5f032-a192-4499-97ba-53b939712fa9/content" width="32" alt="Home Hardware" style="width:32px;max-width:32px;height:auto;display:inline-block;border:0;margin-right:6px;vertical-align:middle;">
|
||||||
|
<span style="font-size:13px;color:#64748B;vertical-align:middle;font-weight:400;">et plus</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-family:Plus Jakarta Sans,sans-serif;font-size:14px;color:#64748B;margin-top:8px;">⚡ Disponible instantanément sur Giftbit en cliquant sur ton montant</div>
|
||||||
|
<div style="font-family:Plus Jakarta Sans,sans-serif;font-size:14px;color:#64748B;">🤝 Condition : Maintenir l'abonnement {{commitment_months}} mois ou +</div>
|
||||||
|
</td></tr>
|
||||||
|
</table>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:#ffffff;">
|
||||||
|
<div class="u-row" style="border:1px solid #e5e7eb;border-radius:0;background:#ffffff;background-color:#ffffff;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:#ffffff;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:#ffffff;"><tr><td style="border:1px solid #e5e7eb;border-radius:0;background-color:#ffffff;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0" style="border-collapse:separate;line-height:100%;">
|
||||||
|
<tbody><tr><td style="padding:8px 36px;text-align:center;" align="center">
|
||||||
|
<a href="{{gift_url}}" target="_blank" class="u_content_button" style="display:inline-block;background:#00C853;color:#FFFFFF;font-family:'Space Grotesk', Helvetica, Arial, sans-serif;font-size:32px;font-weight:700;line-height:120%;text-decoration:none;padding:30px 24px;border-radius:12px;">🎁 {{amount}}</a>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:#ffffff;">
|
||||||
|
<div class="u-row" style="border:1px solid #e5e7eb;border-radius:0;background:#ffffff;background-color:#ffffff;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:#ffffff;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:#ffffff;"><tr><td style="border:1px solid #e5e7eb;border-radius:0;background-color:#ffffff;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:0 36px 4px;font-family:'Plus Jakarta Sans', sans-serif;" align="center">
|
||||||
|
<div class="u_content_text" style="font-size:13px;font-weight:400;color:#64748B;text-align:center;line-height:140%;">⏰ Cadeau valide jusqu'au <strong style="color:#1B2E24;">{{expires_at_date}}</strong></div>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:#ffffff;">
|
||||||
|
<div class="u-row" style="border:1px solid #e5e7eb;border-radius:0;background:#ffffff;background-color:#ffffff;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:#ffffff;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:#ffffff;"><tr><td style="border:1px solid #e5e7eb;border-radius:0;background-color:#ffffff;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:10px 36px 22px;font-family:'Plus Jakarta Sans', sans-serif;" align="left">
|
||||||
|
<div class="u_content_text" style="font-size:14px;font-weight:400;color:#6b7280;text-align:left;line-height:150%;">🪂 Annulation avant {{commitment_months}} mois : seulement à rembourser au prorata des mois restants.</div>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:#ffffff;">
|
||||||
|
<div class="u-row" style="border:1px solid #e5e7eb;border-radius:0;background:#ffffff;background-color:#ffffff;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:#ffffff;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:#ffffff;"><tr><td style="border:1px solid #e5e7eb;border-radius:0;background-color:#ffffff;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="padding:8px 36px 4px;">
|
||||||
|
<div style="font-family:Plus Jakarta Sans,sans-serif;font-size:16px;text-align:left;color:#1B2E24;"><span style="display:inline-block;background:#F5FAF7;color:#6b7280;font-size:13px;font-weight:700;padding:5px 12px;border-radius:6px;">⏭️ Option 2</span></div>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:0 36px 22px;font-family:'Plus Jakarta Sans', sans-serif;" align="left">
|
||||||
|
<div class="u_content_text" style="font-size:15px;font-weight:400;color:#4b5563;text-align:left;line-height:155%;">Ne rien faire. Aucun changement à ton abonnement actuel.</div>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:#ffffff;">
|
||||||
|
<div class="u-row" style="border:1px solid #e5e7eb;border-radius:0 0 12px 12px;background:#ffffff;background-color:#ffffff;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:#ffffff;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:#ffffff;"><tr><td style="border:1px solid #e5e7eb;border-radius:0 0 12px 12px;background-color:#ffffff;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:18px 36px 28px;font-family:'Plus Jakarta Sans', sans-serif;" align="left">
|
||||||
|
<div class="u_content_text" style="font-size:15px;font-weight:400;color:#1B2E24;text-align:left;line-height:150%;">🤝 Merci de faire rouler l'économie de notre région avec nous !<br/><span style="color:#64748B;font-size:14px;">L'équipe TARGO</span></div>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:transparent;">
|
||||||
|
<div class="u-row" style="margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:transparent;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:transparent;"><tr><td style="margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:18px 36px 8px;font-family:'Plus Jakarta Sans', sans-serif;" align="center">
|
||||||
|
<div class="u_content_text" style="font-size:12px;font-weight:400;color:#64748B;text-align:center;line-height:155%;">Tu reçois ce courriel parce que tu es client(e) TARGO à <strong style="color:#1B2E24;">{{description}}</strong>.<br/>Une question ? N'hésite pas à nous écrire à <a href="mailto:support@targo.ca" style="color:#00C853;text-decoration:none;">support@targo.ca</a> ou nous appeler au <a href="tel:5144480773" style="color:#00C853;text-decoration:none;">514-448-0773</a>.</div>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:#1C1E26;">
|
||||||
|
<div class="u-row" style="border-radius:12px;background:#1C1E26;background-color:#1C1E26;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:#1C1E26;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:#1C1E26;"><tr><td style="border-radius:12px;background-color:#1C1E26;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="padding:26px 36px 0;text-align:center;" align="center">
|
||||||
|
<img alt="TARGO" src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content" width="120" style="display:block;border:0;height:auto;outline:none;text-decoration:none;width:120px;max-width:100%;" />
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:12px 36px 22px;font-family:'Plus Jakarta Sans', sans-serif;" align="center">
|
||||||
|
<div class="u_content_text" style="font-size:11px;font-weight:400;color:rgba(255,255,255,0.55);text-align:center;line-height:155%;"><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></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if mso]></div><![endif]--><!--[if IE]></div><![endif]-->
|
||||||
|
</body></html>
|
||||||
1276
scripts/campaigns/templates/gift-email-native-reminder-fr.json
Normal file
1276
scripts/campaigns/templates/gift-email-native-reminder-fr.json
Normal file
File diff suppressed because it is too large
Load Diff
277
services/targo-hub/scripts/build-native-template.js
Normal file
277
services/targo-hub/scripts/build-native-template.js
Normal file
|
|
@ -0,0 +1,277 @@
|
||||||
|
#!/usr/bin/env node
|
||||||
|
'use strict'
|
||||||
|
/**
|
||||||
|
* build-native-template.js — generate a template using NATIVE Unlayer blocks
|
||||||
|
* (text / image / button / divider / html) instead of one giant Custom HTML
|
||||||
|
* block. Produces matched .json (for the Unlayer editor canvas) and .html
|
||||||
|
* (what the worker sends to recipients) in lockstep so what the operator
|
||||||
|
* edits is exactly what the recipient receives.
|
||||||
|
*
|
||||||
|
* Usage:
|
||||||
|
* node build-native-template.js gift-email-native-reminder-fr
|
||||||
|
*
|
||||||
|
* Each template is defined as a JS module under templates-spec/<name>.js
|
||||||
|
* exporting { body: { rows: [...] }, preheader, ariaLabel }.
|
||||||
|
*
|
||||||
|
* Native block coverage (granular editability in Unlayer):
|
||||||
|
* - text : rich-text paragraphs, supports {{vars}}
|
||||||
|
* - image : standalone logos, with alt + optional href
|
||||||
|
* - button : single CTA, supports {{vars}} in href and label
|
||||||
|
* - divider : horizontal rule
|
||||||
|
* - html : escape-hatch for custom markup (chips, multi-logo strips)
|
||||||
|
*/
|
||||||
|
|
||||||
|
const fs = require('fs')
|
||||||
|
const path = require('path')
|
||||||
|
|
||||||
|
// ── ID counter so each block gets a unique htmlID Unlayer can reference ──
|
||||||
|
const counter = { u_row: 0, u_column: 0, u_content_text: 0, u_content_image: 0,
|
||||||
|
u_content_button: 0, u_content_divider: 0, u_content_html: 0 }
|
||||||
|
function nextId (kind) { counter[kind]++; return `${kind}_${counter[kind]}` }
|
||||||
|
|
||||||
|
// ── Default values shared across all blocks (Unlayer fills these on save) ──
|
||||||
|
const COMMON = {
|
||||||
|
selectable: true, draggable: true, duplicatable: true, deletable: true,
|
||||||
|
hideable: true, hideDesktop: false, displayCondition: null,
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Block factories — each returns { json: <Unlayer block>, html: <compiled> } ──
|
||||||
|
function textBlock ({ html, padding = '10px 36px', fontSize = '16px', fontWeight = 400,
|
||||||
|
color = '#374151', textAlign = 'left', lineHeight = '150%' }) {
|
||||||
|
const id = nextId('u_content_text')
|
||||||
|
return {
|
||||||
|
json: {
|
||||||
|
id, type: 'text',
|
||||||
|
values: {
|
||||||
|
...COMMON, containerPadding: padding, anchor: '',
|
||||||
|
fontWeight, fontSize, color, textAlign, lineHeight,
|
||||||
|
linkStyle: { inherit: true },
|
||||||
|
_meta: { htmlID: id, htmlClassNames: 'u_content_text' },
|
||||||
|
text: html,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
html: ` <table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:${padding};font-family:'Plus Jakarta Sans', sans-serif;" align="${textAlign}">
|
||||||
|
<div class="u_content_text" style="font-size:${fontSize};font-weight:${fontWeight};color:${color};text-align:${textAlign};line-height:${lineHeight};">${html}</div>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>`,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function imageBlock ({ src, alt = '', width = 140, padding = '10px',
|
||||||
|
textAlign = 'center', href = '' }) {
|
||||||
|
const id = nextId('u_content_image')
|
||||||
|
const imgTag = `<img alt="${alt}" src="${src}" width="${width}" style="display:block;border:0;height:auto;outline:none;text-decoration:none;width:${width}px;max-width:100%;" />`
|
||||||
|
const wrapped = href ? `<a href="${href}" target="_blank" style="text-decoration:none;">${imgTag}</a>` : imgTag
|
||||||
|
return {
|
||||||
|
json: {
|
||||||
|
id, type: 'image',
|
||||||
|
values: {
|
||||||
|
...COMMON, containerPadding: padding, anchor: '',
|
||||||
|
src: { url: src, width, height: 'auto', autoWidth: false, maxWidth: `${width}px` },
|
||||||
|
textAlign, altText: alt,
|
||||||
|
action: href ? { name: 'web', values: { href, target: '_blank' } } : { name: 'web', values: { href: '', target: '_blank' } },
|
||||||
|
_meta: { htmlID: id, htmlClassNames: 'u_content_image' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
html: ` <table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="padding:${padding};text-align:${textAlign};" align="${textAlign}">
|
||||||
|
${wrapped}
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>`,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function buttonBlock ({ text, href, padding = '10px 25px',
|
||||||
|
buttonPadding = '30px 24px', bgColor = '#00C853',
|
||||||
|
color = '#FFFFFF', borderRadius = '12px',
|
||||||
|
fontSize = '32px', fontWeight = 700 }) {
|
||||||
|
const id = nextId('u_content_button')
|
||||||
|
return {
|
||||||
|
json: {
|
||||||
|
id, type: 'button',
|
||||||
|
values: {
|
||||||
|
...COMMON, containerPadding: padding, anchor: '',
|
||||||
|
href: { name: 'web', values: { href, target: '_blank' } },
|
||||||
|
buttonColors: { color, backgroundColor: bgColor, hoverColor: color, hoverBackgroundColor: '#005026' },
|
||||||
|
size: { autoWidth: false, width: '100%' },
|
||||||
|
fontSize, fontWeight, textAlign: 'center', lineHeight: '120%',
|
||||||
|
padding: buttonPadding, border: {}, borderRadius,
|
||||||
|
_meta: { htmlID: id, htmlClassNames: 'u_content_button' },
|
||||||
|
text: `<span style="font-size: ${fontSize}; line-height: 120%; font-weight: ${fontWeight};">${text}</span>`,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
html: ` <table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0" style="border-collapse:separate;line-height:100%;">
|
||||||
|
<tbody><tr><td style="padding:${padding};text-align:center;" align="center">
|
||||||
|
<a href="${href}" target="_blank" class="u_content_button" style="display:inline-block;background:${bgColor};color:${color};font-family:'Space Grotesk', Helvetica, Arial, sans-serif;font-size:${fontSize};font-weight:${fontWeight};line-height:120%;text-decoration:none;padding:${buttonPadding};border-radius:${borderRadius};">${text}</a>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>`,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function htmlBlock ({ html, padding = '0' }) {
|
||||||
|
const id = nextId('u_content_html')
|
||||||
|
return {
|
||||||
|
json: {
|
||||||
|
id, type: 'html',
|
||||||
|
values: {
|
||||||
|
...COMMON, containerPadding: padding, anchor: '',
|
||||||
|
_meta: { htmlID: id, htmlClassNames: 'u_content_html' },
|
||||||
|
html,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
html: ` <table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="padding:${padding};">
|
||||||
|
${html}
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>`,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function dividerBlock ({ padding = '10px', borderColor = '#e5e7eb' }) {
|
||||||
|
const id = nextId('u_content_divider')
|
||||||
|
return {
|
||||||
|
json: {
|
||||||
|
id, type: 'divider',
|
||||||
|
values: {
|
||||||
|
...COMMON, containerPadding: padding, anchor: '',
|
||||||
|
width: '100%', border: { borderTopWidth: '1px', borderTopStyle: 'solid', borderTopColor: borderColor },
|
||||||
|
textAlign: 'center', _meta: { htmlID: id, htmlClassNames: 'u_content_divider' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
html: ` <table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="padding:${padding};">
|
||||||
|
<hr style="border:none;border-top:1px solid ${borderColor};margin:0;width:100%;" />
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>`,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Bundle a list of blocks into a single Unlayer row+column with shared row styles.
|
||||||
|
function row (blocks, opts = {}) {
|
||||||
|
const rowId = nextId('u_row'); const colId = nextId('u_column')
|
||||||
|
const { backgroundColor = '', columnsBackgroundColor = '', padding = '0px',
|
||||||
|
border = '', borderRadius = '', columnPadding = '0px' } = opts
|
||||||
|
const rowBg = backgroundColor || 'transparent'
|
||||||
|
const innerStyle = [
|
||||||
|
border ? `border:${border}` : '',
|
||||||
|
borderRadius ? `border-radius:${borderRadius}` : '',
|
||||||
|
padding !== '0px' ? `padding:${padding}` : '',
|
||||||
|
backgroundColor ? `background:${backgroundColor};background-color:${backgroundColor}` : '',
|
||||||
|
'margin:0 auto', 'max-width:600px',
|
||||||
|
].filter(Boolean).join(';')
|
||||||
|
return {
|
||||||
|
json: {
|
||||||
|
id: rowId, cells: [1],
|
||||||
|
columns: [{
|
||||||
|
id: colId,
|
||||||
|
contents: blocks.map(b => b.json),
|
||||||
|
values: { ...COMMON, _meta: { htmlID: colId, htmlClassNames: 'u_column' },
|
||||||
|
padding: columnPadding, border: {}, borderRadius: '0px', backgroundColor: columnsBackgroundColor },
|
||||||
|
}],
|
||||||
|
values: {
|
||||||
|
...COMMON, displayCondition: null, columns: false,
|
||||||
|
backgroundColor, columnsBackgroundColor,
|
||||||
|
backgroundImage: { url: '', fullWidth: true, repeat: 'no-repeat', size: 'custom', position: 'center' },
|
||||||
|
padding, anchor: '', borderRadius,
|
||||||
|
_meta: { htmlID: rowId, htmlClassNames: 'u_row' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
html: `<div class="u-row-container" style="padding:${padding};background-color:${rowBg};">
|
||||||
|
<div class="u-row" style="${innerStyle}">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:${padding};background-color:${rowBg};"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:${rowBg};"><tr><td style="${innerStyle.replace(/background[^;]+;?/, '')}"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:${columnPadding};"><!--<![endif]-->
|
||||||
|
${blocks.map(b => b.html).join('\n')}
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>`,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Compose the full <html> shell — Unlayer-standard markup + our brand defaults.
|
||||||
|
function compileHtml (preheader, ariaLabel, rows) {
|
||||||
|
return `<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
|
||||||
|
<head>
|
||||||
|
<!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="x-apple-disable-message-reformatting">
|
||||||
|
<!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
|
||||||
|
<style type="text/css">
|
||||||
|
@media only screen and (min-width: 620px) { .u-row { width: 600px !important; } .u-row .u-col { vertical-align: top; } .u-row .u-col-100 { width: 600px !important; } }
|
||||||
|
@media only screen and (max-width: 620px) {
|
||||||
|
.u-row-container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
|
||||||
|
.u-row { width: 100% !important; }
|
||||||
|
.u-row .u-col { display: block !important; width: 100% !important; min-width: 320px !important; max-width: 100% !important; }
|
||||||
|
.u-row .u-col > div { margin: 0 auto; }
|
||||||
|
}
|
||||||
|
body{margin:0;padding:0}table,td,tr{border-collapse:collapse;vertical-align:top}*{line-height:inherit}a[x-apple-data-detectors=true]{color:inherit!important;text-decoration:none!important}
|
||||||
|
table, td { color: #1B2E24; } #u_body a { color: #00C853; text-decoration: underline; }
|
||||||
|
</style>
|
||||||
|
<!--[if !mso]><!--><link href="https://fonts.googleapis.com/css?family=Plus+Jakarta+Sans:400,500,600,700" rel="stylesheet" type="text/css"><!--<![endif]-->
|
||||||
|
</head>
|
||||||
|
<body class="clean-body u_body" style="margin:0;padding:0;-webkit-text-size-adjust:100%;background-color:#F5FAF7;color:#1B2E24">
|
||||||
|
<!--[if IE]><div class="ie-container"><![endif]--><!--[if mso]><div class="mso-container"><![endif]-->
|
||||||
|
<table role="presentation" id="u_body" style="border-collapse:collapse;table-layout:fixed;border-spacing:0;mso-table-lspace:0pt;mso-table-rspace:0pt;vertical-align:top;min-width:320px;Margin:0 auto;background-color:#F5FAF7;width:100%" cellpadding="0" cellspacing="0">
|
||||||
|
<tbody>
|
||||||
|
<tr><td style="display:none !important;visibility:hidden;mso-hide:all;font-size:1px;color:#fff;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">${preheader}</td></tr>
|
||||||
|
<tr style="vertical-align:top"><td style="word-break:break-word;border-collapse:collapse !important;vertical-align:top">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center" style="background-color:#F5FAF7;" bgcolor="#F5FAF7"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center"><tr><td><![endif]-->
|
||||||
|
<div aria-label="${ariaLabel}" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#F5FAF7;">
|
||||||
|
|
||||||
|
${rows.map(r => r.html).join('\n\n')}
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if mso]></div><![endif]--><!--[if IE]></div><![endif]-->
|
||||||
|
</body></html>`
|
||||||
|
}
|
||||||
|
|
||||||
|
function compileJson (preheader, ariaLabel, rows) {
|
||||||
|
return {
|
||||||
|
counters: { ...counter },
|
||||||
|
body: {
|
||||||
|
id: 'u_body',
|
||||||
|
rows: rows.map(r => r.json),
|
||||||
|
values: {
|
||||||
|
popupPosition: 'center', popupWidth: '600px', popupHeight: 'auto',
|
||||||
|
borderRadius: '10px', contentAlign: 'center', contentVerticalAlign: 'center',
|
||||||
|
contentWidth: '600px',
|
||||||
|
fontFamily: { label: 'Plus Jakarta Sans', value: "'Plus Jakarta Sans', sans-serif",
|
||||||
|
url: 'https://fonts.googleapis.com/css?family=Plus+Jakarta+Sans:400,500,600,700' },
|
||||||
|
textColor: '#1B2E24', popupBackgroundColor: '#FFFFFF', backgroundColor: '#F5FAF7',
|
||||||
|
preheaderText: preheader,
|
||||||
|
linkStyle: { body: true, linkColor: '#00C853', linkHoverColor: '#005026',
|
||||||
|
linkUnderline: true, linkHoverUnderline: true },
|
||||||
|
_meta: { htmlID: 'u_body', htmlClassNames: 'u_body' },
|
||||||
|
},
|
||||||
|
},
|
||||||
|
schemaVersion: 16,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// ── Export the factories so template-spec files can use them ──────────────
|
||||||
|
module.exports = { textBlock, imageBlock, buttonBlock, htmlBlock, dividerBlock, row, compileHtml, compileJson }
|
||||||
|
|
||||||
|
// ── CLI ───────────────────────────────────────────────────────────────────
|
||||||
|
if (require.main === module) {
|
||||||
|
const name = process.argv[2]
|
||||||
|
if (!name) { console.error('Usage: build-native-template.js <template-name>'); process.exit(1) }
|
||||||
|
const spec = require(path.resolve(__dirname, 'templates-spec', name))
|
||||||
|
const tplDir = path.resolve(__dirname, '..', 'templates')
|
||||||
|
const rows = spec.rows(module.exports)
|
||||||
|
fs.writeFileSync(path.join(tplDir, name + '.html'), compileHtml(spec.preheader, spec.ariaLabel, rows), 'utf8')
|
||||||
|
fs.writeFileSync(path.join(tplDir, name + '.json'), JSON.stringify(compileJson(spec.preheader, spec.ariaLabel, rows), null, 2), 'utf8')
|
||||||
|
console.log(`✓ Built ${name}.html (${fs.statSync(path.join(tplDir, name + '.html')).size}b) + ${name}.json (${fs.statSync(path.join(tplDir, name + '.json')).size}b)`)
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,162 @@
|
||||||
|
'use strict'
|
||||||
|
/**
|
||||||
|
* gift-email-native-reminder-fr — proof-of-concept reminder template built
|
||||||
|
* entirely from Unlayer NATIVE blocks (text / image / button) wherever
|
||||||
|
* possible, with strategic html blocks for the chips and the brand-logo
|
||||||
|
* strip (too custom for native).
|
||||||
|
*
|
||||||
|
* Operator can edit each text/button/image block individually in the
|
||||||
|
* Unlayer canvas (rich panel on the right with font, color, padding,
|
||||||
|
* alignment controls). The 4 html blocks (Option 1 chip, brand-logo card,
|
||||||
|
* Option 2 chip, dark footer band) still need raw HTML edits.
|
||||||
|
*/
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
preheader: "Comme toi, on aime les connexions stables et les relations durables.",
|
||||||
|
ariaLabel: "Une offre exclusive de TARGO",
|
||||||
|
|
||||||
|
// rows() receives the block factories from build-native-template.js
|
||||||
|
rows: ({ textBlock, imageBlock, buttonBlock, htmlBlock, row }) => [
|
||||||
|
|
||||||
|
// ── 1 · Optional "View in browser" line (collapses if view_url empty) ──
|
||||||
|
row([
|
||||||
|
htmlBlock({
|
||||||
|
html: `{{#view_url}}<div style="text-align:center;padding:4px 0;"><a href="{{view_url}}" style="font-family:Plus Jakarta Sans,sans-serif;font-size:11px;color:#94a3b8;text-decoration:underline;">Affichage incorrect ? Voir dans le navigateur</a></div>{{/view_url}}`,
|
||||||
|
padding: '0',
|
||||||
|
}),
|
||||||
|
], { padding: '8px 0 0' }),
|
||||||
|
|
||||||
|
// ── 2 · Header logo (white rounded card top) ─────────────────────────
|
||||||
|
row([
|
||||||
|
imageBlock({
|
||||||
|
src: 'https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content',
|
||||||
|
alt: 'TARGO', width: 140, padding: '28px 36px 22px', textAlign: 'center',
|
||||||
|
}),
|
||||||
|
], { backgroundColor: '#ffffff', border: '1px solid #e5e7eb', borderRadius: '12px 12px 0 0' }),
|
||||||
|
|
||||||
|
// ── 3 · Greeting (text block — fully editable) ───────────────────────
|
||||||
|
row([
|
||||||
|
textBlock({
|
||||||
|
html: 'Petit rappel pour {{firstname}},',
|
||||||
|
padding: '20px 36px 8px', fontSize: '16px', color: '#374151',
|
||||||
|
}),
|
||||||
|
], { backgroundColor: '#ffffff', border: '1px solid #e5e7eb', borderRadius: '0' }),
|
||||||
|
|
||||||
|
// ── 4 · Urgency line (text block, bold dark green) ───────────────────
|
||||||
|
row([
|
||||||
|
textBlock({
|
||||||
|
html: '🎁 Ton cadeau de {{amount}} reste disponible jusqu\'au {{expires_at_date}}.',
|
||||||
|
padding: '4px 36px 14px', fontSize: '17px', fontWeight: 600, color: '#1B2E24',
|
||||||
|
}),
|
||||||
|
], { backgroundColor: '#ffffff', border: '1px solid #e5e7eb', borderRadius: '0' }),
|
||||||
|
|
||||||
|
// ── 5 · Body paragraph (text block, justify) ─────────────────────────
|
||||||
|
row([
|
||||||
|
textBlock({
|
||||||
|
html: 'On voulait juste s\'assurer que tu ne l\'as pas manqué. La carte-cadeau qu\'on t\'a envoyée pour te remercier peut s\'utiliser chez des centaines de marques canadiennes, en quelques clics.<br/><br/>Si tu préfères ne pas l\'utiliser, aucun souci, pas besoin de répondre à ce courriel.',
|
||||||
|
padding: '0 36px 18px', fontSize: '16px', color: '#374151', textAlign: 'justify',
|
||||||
|
}),
|
||||||
|
], { backgroundColor: '#ffffff', border: '1px solid #e5e7eb', borderRadius: '0' }),
|
||||||
|
|
||||||
|
// ── 6 · Option 1 chip (html block — too custom for native text) ──────
|
||||||
|
row([
|
||||||
|
htmlBlock({
|
||||||
|
html: '<div style="font-family:Plus Jakarta Sans,sans-serif;font-size:16px;text-align:left;color:#1B2E24;"><span style="display:inline-block;background:#E6F9EE;color:#00C853;font-size:13px;font-weight:700;padding:5px 12px;border-radius:6px;">✅ Option 1</span></div>',
|
||||||
|
padding: '8px 36px 4px',
|
||||||
|
}),
|
||||||
|
], { backgroundColor: '#ffffff', border: '1px solid #e5e7eb', borderRadius: '0' }),
|
||||||
|
|
||||||
|
// ── 7 · Compact info card with brand logos (html block) ──────────────
|
||||||
|
row([
|
||||||
|
htmlBlock({
|
||||||
|
html: `<table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:separate;">
|
||||||
|
<tr><td style="background-color:#F5FAF7;border-radius:10px;padding:18px 22px;">
|
||||||
|
<div style="font-family:Plus Jakarta Sans,sans-serif;font-size:16px;font-weight:700;color:#1B2E24;line-height:1.5;">
|
||||||
|
🎁 {{amount}} chez des centaines de marques<br><br>
|
||||||
|
<span style="display:inline-block;">
|
||||||
|
<img src="https://xqy3m.mjt.lu/img2/xqy3m/4b0b2a4a-5f99-416c-8873-8d3e4389b6f7/content" width="32" alt="Tim Hortons" style="width:32px;max-width:32px;height:auto;display:inline-block;border:0;margin-right:6px;vertical-align:middle;">
|
||||||
|
<img src="https://xqy3m.mjt.lu/img2/xqy3m/14df433d-583c-4602-a403-d47ee84966a6/content" width="32" alt="Walmart" style="width:32px;max-width:32px;height:auto;display:inline-block;border:0;margin-right:6px;vertical-align:middle;">
|
||||||
|
<img src="https://xqy3m.mjt.lu/img2/xqy3m/b8d3db5a-d39e-43ce-a84a-2f5dddbf0192/content" width="32" alt="Home Depot" style="width:32px;max-width:32px;height:auto;display:inline-block;border:0;margin-right:6px;vertical-align:middle;">
|
||||||
|
<img src="https://xqy3m.mjt.lu/img2/xqy3m/9c9dfa18-2a3a-414a-b5ad-16d490c961b5/content" width="32" alt="IGA" style="width:32px;max-width:32px;height:auto;display:inline-block;border:0;margin-right:6px;vertical-align:middle;">
|
||||||
|
<img src="https://xqy3m.mjt.lu/img2/xqy3m/a1e5f032-a192-4499-97ba-53b939712fa9/content" width="32" alt="Home Hardware" style="width:32px;max-width:32px;height:auto;display:inline-block;border:0;margin-right:6px;vertical-align:middle;">
|
||||||
|
<span style="font-size:13px;color:#64748B;vertical-align:middle;font-weight:400;">et plus</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-family:Plus Jakarta Sans,sans-serif;font-size:14px;color:#64748B;margin-top:8px;">⚡ Disponible instantanément sur Giftbit en cliquant sur ton montant</div>
|
||||||
|
<div style="font-family:Plus Jakarta Sans,sans-serif;font-size:14px;color:#64748B;">🤝 Condition : Maintenir l'abonnement {{commitment_months}} mois ou +</div>
|
||||||
|
</td></tr>
|
||||||
|
</table>`,
|
||||||
|
padding: '0 36px 22px',
|
||||||
|
}),
|
||||||
|
], { backgroundColor: '#ffffff', border: '1px solid #e5e7eb', borderRadius: '0' }),
|
||||||
|
|
||||||
|
// ── 8 · Big green CTA button (NATIVE button block!) ──────────────────
|
||||||
|
row([
|
||||||
|
buttonBlock({
|
||||||
|
text: '🎁 {{amount}}',
|
||||||
|
href: '{{gift_url}}',
|
||||||
|
padding: '8px 36px',
|
||||||
|
buttonPadding: '30px 24px',
|
||||||
|
bgColor: '#00C853', color: '#FFFFFF', borderRadius: '12px',
|
||||||
|
fontSize: '32px', fontWeight: 700,
|
||||||
|
}),
|
||||||
|
], { backgroundColor: '#ffffff', border: '1px solid #e5e7eb', borderRadius: '0' }),
|
||||||
|
|
||||||
|
// ── 9 · Expiry badge (text block) ────────────────────────────────────
|
||||||
|
row([
|
||||||
|
textBlock({
|
||||||
|
html: '⏰ Cadeau valide jusqu\'au <strong style="color:#1B2E24;">{{expires_at_date}}</strong>',
|
||||||
|
padding: '0 36px 4px', fontSize: '13px', color: '#64748B', textAlign: 'center', lineHeight: '140%',
|
||||||
|
}),
|
||||||
|
], { backgroundColor: '#ffffff', border: '1px solid #e5e7eb', borderRadius: '0' }),
|
||||||
|
|
||||||
|
// ── 10 · Prorata disclaimer (text block) ─────────────────────────────
|
||||||
|
row([
|
||||||
|
textBlock({
|
||||||
|
html: '🪂 Annulation avant {{commitment_months}} mois : seulement à rembourser au prorata des mois restants.',
|
||||||
|
padding: '10px 36px 22px', fontSize: '14px', color: '#6b7280',
|
||||||
|
}),
|
||||||
|
], { backgroundColor: '#ffffff', border: '1px solid #e5e7eb', borderRadius: '0' }),
|
||||||
|
|
||||||
|
// ── 11 · Option 2 chip + text ────────────────────────────────────────
|
||||||
|
row([
|
||||||
|
htmlBlock({
|
||||||
|
html: '<div style="font-family:Plus Jakarta Sans,sans-serif;font-size:16px;text-align:left;color:#1B2E24;"><span style="display:inline-block;background:#F5FAF7;color:#6b7280;font-size:13px;font-weight:700;padding:5px 12px;border-radius:6px;">⏭️ Option 2</span></div>',
|
||||||
|
padding: '8px 36px 4px',
|
||||||
|
}),
|
||||||
|
textBlock({
|
||||||
|
html: 'Ne rien faire. Aucun changement à ton abonnement actuel.',
|
||||||
|
padding: '0 36px 22px', fontSize: '15px', color: '#4b5563', lineHeight: '155%',
|
||||||
|
}),
|
||||||
|
], { backgroundColor: '#ffffff', border: '1px solid #e5e7eb', borderRadius: '0' }),
|
||||||
|
|
||||||
|
// ── 12 · Signature (text block) ──────────────────────────────────────
|
||||||
|
row([
|
||||||
|
textBlock({
|
||||||
|
html: '🤝 Merci de faire rouler l\'économie de notre région avec nous !<br/><span style="color:#64748B;font-size:14px;">L\'équipe TARGO</span>',
|
||||||
|
padding: '18px 36px 28px', fontSize: '15px', color: '#1B2E24',
|
||||||
|
}),
|
||||||
|
], { backgroundColor: '#ffffff', border: '1px solid #e5e7eb', borderRadius: '0 0 12px 12px' }),
|
||||||
|
|
||||||
|
// ── 13 · Contact info (text block, outside the card) ─────────────────
|
||||||
|
row([
|
||||||
|
textBlock({
|
||||||
|
html: 'Tu reçois ce courriel parce que tu es client(e) TARGO à <strong style="color:#1B2E24;">{{description}}</strong>.<br/>Une question ? N\'hésite pas à nous écrire à <a href="mailto:support@targo.ca" style="color:#00C853;text-decoration:none;">support@targo.ca</a> ou nous appeler au <a href="tel:5144480773" style="color:#00C853;text-decoration:none;">514-448-0773</a>.',
|
||||||
|
padding: '18px 36px 8px', fontSize: '12px', color: '#64748B', textAlign: 'center', lineHeight: '155%',
|
||||||
|
}),
|
||||||
|
], {}),
|
||||||
|
|
||||||
|
// ── 14 · Dark footer band (image + text on #1C1E26) ──────────────────
|
||||||
|
row([
|
||||||
|
imageBlock({
|
||||||
|
src: 'https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content',
|
||||||
|
alt: 'TARGO', width: 120, padding: '26px 36px 0', textAlign: 'center',
|
||||||
|
}),
|
||||||
|
textBlock({
|
||||||
|
html: '<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.',
|
||||||
|
padding: '12px 36px 22px', fontSize: '11px', color: 'rgba(255,255,255,0.55)', textAlign: 'center', lineHeight: '155%',
|
||||||
|
}),
|
||||||
|
], { backgroundColor: '#1C1E26', borderRadius: '12px' }),
|
||||||
|
|
||||||
|
],
|
||||||
|
}
|
||||||
343
services/targo-hub/templates/gift-email-native-reminder-fr.html
Normal file
343
services/targo-hub/templates/gift-email-native-reminder-fr.html
Normal file
|
|
@ -0,0 +1,343 @@
|
||||||
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
||||||
|
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
|
||||||
|
<head>
|
||||||
|
<!--[if gte mso 9]><xml><o:OfficeDocumentSettings><o:AllowPNG/><o:PixelsPerInch>96</o:PixelsPerInch></o:OfficeDocumentSettings></xml><![endif]-->
|
||||||
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta name="x-apple-disable-message-reformatting">
|
||||||
|
<!--[if !mso]><!--><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--<![endif]-->
|
||||||
|
<style type="text/css">
|
||||||
|
@media only screen and (min-width: 620px) { .u-row { width: 600px !important; } .u-row .u-col { vertical-align: top; } .u-row .u-col-100 { width: 600px !important; } }
|
||||||
|
@media only screen and (max-width: 620px) {
|
||||||
|
.u-row-container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }
|
||||||
|
.u-row { width: 100% !important; }
|
||||||
|
.u-row .u-col { display: block !important; width: 100% !important; min-width: 320px !important; max-width: 100% !important; }
|
||||||
|
.u-row .u-col > div { margin: 0 auto; }
|
||||||
|
}
|
||||||
|
body{margin:0;padding:0}table,td,tr{border-collapse:collapse;vertical-align:top}*{line-height:inherit}a[x-apple-data-detectors=true]{color:inherit!important;text-decoration:none!important}
|
||||||
|
table, td { color: #1B2E24; } #u_body a { color: #00C853; text-decoration: underline; }
|
||||||
|
</style>
|
||||||
|
<!--[if !mso]><!--><link href="https://fonts.googleapis.com/css?family=Plus+Jakarta+Sans:400,500,600,700" rel="stylesheet" type="text/css"><!--<![endif]-->
|
||||||
|
</head>
|
||||||
|
<body class="clean-body u_body" style="margin:0;padding:0;-webkit-text-size-adjust:100%;background-color:#F5FAF7;color:#1B2E24">
|
||||||
|
<!--[if IE]><div class="ie-container"><![endif]--><!--[if mso]><div class="mso-container"><![endif]-->
|
||||||
|
<table role="presentation" id="u_body" style="border-collapse:collapse;table-layout:fixed;border-spacing:0;mso-table-lspace:0pt;mso-table-rspace:0pt;vertical-align:top;min-width:320px;Margin:0 auto;background-color:#F5FAF7;width:100%" cellpadding="0" cellspacing="0">
|
||||||
|
<tbody>
|
||||||
|
<tr><td style="display:none !important;visibility:hidden;mso-hide:all;font-size:1px;color:#fff;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">Comme toi, on aime les connexions stables et les relations durables.</td></tr>
|
||||||
|
<tr style="vertical-align:top"><td style="word-break:break-word;border-collapse:collapse !important;vertical-align:top">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td align="center" style="background-color:#F5FAF7;" bgcolor="#F5FAF7"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center"><tr><td><![endif]-->
|
||||||
|
<div aria-label="Une offre exclusive de TARGO" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#F5FAF7;">
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:8px 0 0;background-color:transparent;">
|
||||||
|
<div class="u-row" style="padding:8px 0 0;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:8px 0 0;background-color:transparent;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:transparent;"><tr><td style="padding:8px 0 0;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="padding:0;">
|
||||||
|
{{#view_url}}<div style="text-align:center;padding:4px 0;"><a href="{{view_url}}" style="font-family:Plus Jakarta Sans,sans-serif;font-size:11px;color:#94a3b8;text-decoration:underline;">Affichage incorrect ? Voir dans le navigateur</a></div>{{/view_url}}
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:#ffffff;">
|
||||||
|
<div class="u-row" style="border:1px solid #e5e7eb;border-radius:12px 12px 0 0;background:#ffffff;background-color:#ffffff;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:#ffffff;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:#ffffff;"><tr><td style="border:1px solid #e5e7eb;border-radius:12px 12px 0 0;background-color:#ffffff;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="padding:28px 36px 22px;text-align:center;" align="center">
|
||||||
|
<img alt="TARGO" src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content" width="140" style="display:block;border:0;height:auto;outline:none;text-decoration:none;width:140px;max-width:100%;" />
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:#ffffff;">
|
||||||
|
<div class="u-row" style="border:1px solid #e5e7eb;border-radius:0;background:#ffffff;background-color:#ffffff;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:#ffffff;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:#ffffff;"><tr><td style="border:1px solid #e5e7eb;border-radius:0;background-color:#ffffff;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:20px 36px 8px;font-family:'Plus Jakarta Sans', sans-serif;" align="left">
|
||||||
|
<div class="u_content_text" style="font-size:16px;font-weight:400;color:#374151;text-align:left;line-height:150%;">Petit rappel pour {{firstname}},</div>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:#ffffff;">
|
||||||
|
<div class="u-row" style="border:1px solid #e5e7eb;border-radius:0;background:#ffffff;background-color:#ffffff;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:#ffffff;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:#ffffff;"><tr><td style="border:1px solid #e5e7eb;border-radius:0;background-color:#ffffff;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:4px 36px 14px;font-family:'Plus Jakarta Sans', sans-serif;" align="left">
|
||||||
|
<div class="u_content_text" style="font-size:17px;font-weight:600;color:#1B2E24;text-align:left;line-height:150%;">🎁 Ton cadeau de {{amount}} reste disponible jusqu'au {{expires_at_date}}.</div>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:#ffffff;">
|
||||||
|
<div class="u-row" style="border:1px solid #e5e7eb;border-radius:0;background:#ffffff;background-color:#ffffff;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:#ffffff;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:#ffffff;"><tr><td style="border:1px solid #e5e7eb;border-radius:0;background-color:#ffffff;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:0 36px 18px;font-family:'Plus Jakarta Sans', sans-serif;" align="justify">
|
||||||
|
<div class="u_content_text" style="font-size:16px;font-weight:400;color:#374151;text-align:justify;line-height:150%;">On voulait juste s'assurer que tu ne l'as pas manqué. La carte-cadeau qu'on t'a envoyée pour te remercier peut s'utiliser chez des centaines de marques canadiennes, en quelques clics.<br/><br/>Si tu préfères ne pas l'utiliser, aucun souci, pas besoin de répondre à ce courriel.</div>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:#ffffff;">
|
||||||
|
<div class="u-row" style="border:1px solid #e5e7eb;border-radius:0;background:#ffffff;background-color:#ffffff;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:#ffffff;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:#ffffff;"><tr><td style="border:1px solid #e5e7eb;border-radius:0;background-color:#ffffff;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="padding:8px 36px 4px;">
|
||||||
|
<div style="font-family:Plus Jakarta Sans,sans-serif;font-size:16px;text-align:left;color:#1B2E24;"><span style="display:inline-block;background:#E6F9EE;color:#00C853;font-size:13px;font-weight:700;padding:5px 12px;border-radius:6px;">✅ Option 1</span></div>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:#ffffff;">
|
||||||
|
<div class="u-row" style="border:1px solid #e5e7eb;border-radius:0;background:#ffffff;background-color:#ffffff;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:#ffffff;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:#ffffff;"><tr><td style="border:1px solid #e5e7eb;border-radius:0;background-color:#ffffff;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="padding:0 36px 22px;">
|
||||||
|
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:separate;">
|
||||||
|
<tr><td style="background-color:#F5FAF7;border-radius:10px;padding:18px 22px;">
|
||||||
|
<div style="font-family:Plus Jakarta Sans,sans-serif;font-size:16px;font-weight:700;color:#1B2E24;line-height:1.5;">
|
||||||
|
🎁 {{amount}} chez des centaines de marques<br><br>
|
||||||
|
<span style="display:inline-block;">
|
||||||
|
<img src="https://xqy3m.mjt.lu/img2/xqy3m/4b0b2a4a-5f99-416c-8873-8d3e4389b6f7/content" width="32" alt="Tim Hortons" style="width:32px;max-width:32px;height:auto;display:inline-block;border:0;margin-right:6px;vertical-align:middle;">
|
||||||
|
<img src="https://xqy3m.mjt.lu/img2/xqy3m/14df433d-583c-4602-a403-d47ee84966a6/content" width="32" alt="Walmart" style="width:32px;max-width:32px;height:auto;display:inline-block;border:0;margin-right:6px;vertical-align:middle;">
|
||||||
|
<img src="https://xqy3m.mjt.lu/img2/xqy3m/b8d3db5a-d39e-43ce-a84a-2f5dddbf0192/content" width="32" alt="Home Depot" style="width:32px;max-width:32px;height:auto;display:inline-block;border:0;margin-right:6px;vertical-align:middle;">
|
||||||
|
<img src="https://xqy3m.mjt.lu/img2/xqy3m/9c9dfa18-2a3a-414a-b5ad-16d490c961b5/content" width="32" alt="IGA" style="width:32px;max-width:32px;height:auto;display:inline-block;border:0;margin-right:6px;vertical-align:middle;">
|
||||||
|
<img src="https://xqy3m.mjt.lu/img2/xqy3m/a1e5f032-a192-4499-97ba-53b939712fa9/content" width="32" alt="Home Hardware" style="width:32px;max-width:32px;height:auto;display:inline-block;border:0;margin-right:6px;vertical-align:middle;">
|
||||||
|
<span style="font-size:13px;color:#64748B;vertical-align:middle;font-weight:400;">et plus</span>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div style="font-family:Plus Jakarta Sans,sans-serif;font-size:14px;color:#64748B;margin-top:8px;">⚡ Disponible instantanément sur Giftbit en cliquant sur ton montant</div>
|
||||||
|
<div style="font-family:Plus Jakarta Sans,sans-serif;font-size:14px;color:#64748B;">🤝 Condition : Maintenir l'abonnement {{commitment_months}} mois ou +</div>
|
||||||
|
</td></tr>
|
||||||
|
</table>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:#ffffff;">
|
||||||
|
<div class="u-row" style="border:1px solid #e5e7eb;border-radius:0;background:#ffffff;background-color:#ffffff;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:#ffffff;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:#ffffff;"><tr><td style="border:1px solid #e5e7eb;border-radius:0;background-color:#ffffff;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0" style="border-collapse:separate;line-height:100%;">
|
||||||
|
<tbody><tr><td style="padding:8px 36px;text-align:center;" align="center">
|
||||||
|
<a href="{{gift_url}}" target="_blank" class="u_content_button" style="display:inline-block;background:#00C853;color:#FFFFFF;font-family:'Space Grotesk', Helvetica, Arial, sans-serif;font-size:32px;font-weight:700;line-height:120%;text-decoration:none;padding:30px 24px;border-radius:12px;">🎁 {{amount}}</a>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:#ffffff;">
|
||||||
|
<div class="u-row" style="border:1px solid #e5e7eb;border-radius:0;background:#ffffff;background-color:#ffffff;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:#ffffff;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:#ffffff;"><tr><td style="border:1px solid #e5e7eb;border-radius:0;background-color:#ffffff;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:0 36px 4px;font-family:'Plus Jakarta Sans', sans-serif;" align="center">
|
||||||
|
<div class="u_content_text" style="font-size:13px;font-weight:400;color:#64748B;text-align:center;line-height:140%;">⏰ Cadeau valide jusqu'au <strong style="color:#1B2E24;">{{expires_at_date}}</strong></div>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:#ffffff;">
|
||||||
|
<div class="u-row" style="border:1px solid #e5e7eb;border-radius:0;background:#ffffff;background-color:#ffffff;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:#ffffff;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:#ffffff;"><tr><td style="border:1px solid #e5e7eb;border-radius:0;background-color:#ffffff;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:10px 36px 22px;font-family:'Plus Jakarta Sans', sans-serif;" align="left">
|
||||||
|
<div class="u_content_text" style="font-size:14px;font-weight:400;color:#6b7280;text-align:left;line-height:150%;">🪂 Annulation avant {{commitment_months}} mois : seulement à rembourser au prorata des mois restants.</div>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:#ffffff;">
|
||||||
|
<div class="u-row" style="border:1px solid #e5e7eb;border-radius:0;background:#ffffff;background-color:#ffffff;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:#ffffff;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:#ffffff;"><tr><td style="border:1px solid #e5e7eb;border-radius:0;background-color:#ffffff;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="padding:8px 36px 4px;">
|
||||||
|
<div style="font-family:Plus Jakarta Sans,sans-serif;font-size:16px;text-align:left;color:#1B2E24;"><span style="display:inline-block;background:#F5FAF7;color:#6b7280;font-size:13px;font-weight:700;padding:5px 12px;border-radius:6px;">⏭️ Option 2</span></div>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:0 36px 22px;font-family:'Plus Jakarta Sans', sans-serif;" align="left">
|
||||||
|
<div class="u_content_text" style="font-size:15px;font-weight:400;color:#4b5563;text-align:left;line-height:155%;">Ne rien faire. Aucun changement à ton abonnement actuel.</div>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:#ffffff;">
|
||||||
|
<div class="u-row" style="border:1px solid #e5e7eb;border-radius:0 0 12px 12px;background:#ffffff;background-color:#ffffff;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:#ffffff;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:#ffffff;"><tr><td style="border:1px solid #e5e7eb;border-radius:0 0 12px 12px;background-color:#ffffff;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:18px 36px 28px;font-family:'Plus Jakarta Sans', sans-serif;" align="left">
|
||||||
|
<div class="u_content_text" style="font-size:15px;font-weight:400;color:#1B2E24;text-align:left;line-height:150%;">🤝 Merci de faire rouler l'économie de notre région avec nous !<br/><span style="color:#64748B;font-size:14px;">L'équipe TARGO</span></div>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:transparent;">
|
||||||
|
<div class="u-row" style="margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:transparent;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:transparent;"><tr><td style="margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:18px 36px 8px;font-family:'Plus Jakarta Sans', sans-serif;" align="center">
|
||||||
|
<div class="u_content_text" style="font-size:12px;font-weight:400;color:#64748B;text-align:center;line-height:155%;">Tu reçois ce courriel parce que tu es client(e) TARGO à <strong style="color:#1B2E24;">{{description}}</strong>.<br/>Une question ? N'hésite pas à nous écrire à <a href="mailto:support@targo.ca" style="color:#00C853;text-decoration:none;">support@targo.ca</a> ou nous appeler au <a href="tel:5144480773" style="color:#00C853;text-decoration:none;">514-448-0773</a>.</div>
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="u-row-container" style="padding:0px;background-color:#1C1E26;">
|
||||||
|
<div class="u-row" style="border-radius:12px;background:#1C1E26;background-color:#1C1E26;margin:0 auto;max-width:600px">
|
||||||
|
<div style="border-collapse:collapse;display:table;width:100%;height:100%;">
|
||||||
|
<!--[if (mso)|(IE)]><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td style="padding:0px;background-color:#1C1E26;"><table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" align="center" style="border-collapse:collapse;background:#1C1E26;"><tr><td style="border-radius:12px;background-color:#1C1E26;margin:0 auto;max-width:600px"><![endif]-->
|
||||||
|
<div class="u-col u-col-100" style="max-width:320px;min-width:600px;display:table-cell;vertical-align:top;">
|
||||||
|
<div style="height:100%;width:100% !important;">
|
||||||
|
<!--[if (!mso)&(!IE)]><!--><div style="box-sizing:border-box;height:100%;padding:0px;"><!--<![endif]-->
|
||||||
|
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="padding:26px 36px 0;text-align:center;" align="center">
|
||||||
|
<img alt="TARGO" src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content" width="120" style="display:block;border:0;height:auto;outline:none;text-decoration:none;width:120px;max-width:100%;" />
|
||||||
|
</td></tr></tbody>
|
||||||
|
</table>
|
||||||
|
<table style="font-family:'Plus Jakarta Sans', sans-serif;" role="presentation" cellpadding="0" cellspacing="0" width="100%" border="0">
|
||||||
|
<tbody><tr><td style="overflow-wrap:break-word;word-break:break-word;padding:12px 36px 22px;font-family:'Plus Jakarta Sans', sans-serif;" align="center">
|
||||||
|
<div class="u_content_text" style="font-size:11px;font-weight:400;color:rgba(255,255,255,0.55);text-align:center;line-height:155%;"><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></tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if (!mso)&(!IE)]><!--></div><!--<![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<!--[if (mso)|(IE)]></td></tr></table></td></tr></table><![endif]-->
|
||||||
|
</td></tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<!--[if mso]></div><![endif]--><!--[if IE]></div><![endif]-->
|
||||||
|
</body></html>
|
||||||
1276
services/targo-hub/templates/gift-email-native-reminder-fr.json
Normal file
1276
services/targo-hub/templates/gift-email-native-reminder-fr.json
Normal file
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user