0fb9089f4e
The native-block imageBlock factory was emitting img tags wrapped only
by a td with text-align:center. That doesn't actually center the image
because text-align only affects inline content, and the img has
display:block. The result: top header logo and dark-footer logo were
left-aligned despite the textAlign:"center" prop on the block.
Fix: wrap each img in an inner <table align="<textAlign>"> exactly the
way MJML/Litmus/Mailchimp do it. This is the canonical email-client
pattern that works in Outlook 2007-2019 (which ignores margin:0 auto
on inline tables but respects table align attributes).
Also: the AI converter dumped the entire dark footer band into a
SINGLE htmlBlock with malformed table markup (a stray </td> outside
its row). Split into proper image + text native blocks so:
1. The logo inherits the new centered nested-table pattern
2. The URL+copyright text is now individually editable in Unlayer
3. The {{year}} placeholder is in a text block where it belongs
And one AI hallucination correction: the converter assigned
textAlign:"left" to the top header logo (probably because the
surrounding column had align="left" in the MJML output). Original
design intent was centered — fixed in the spec.
Verified live: both logos (140px top, 120px footer) now render with
align="center" on their nested wrapper table.
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
46 lines
8.6 KiB
JavaScript
46 lines
8.6 KiB
JavaScript
'use strict'
|
|
/**
|
|
* AUTO-GENERATED by ai-convert-to-native.js — review before deploying.
|
|
*
|
|
* The AI identified 15 semantic block(s) in 4 row(s).
|
|
* Each text/image/button block is individually editable in Unlayer.
|
|
* html blocks (chips, multi-image strips) require raw HTML edits.
|
|
*/
|
|
|
|
module.exports = {
|
|
preheader: "Comme toi, on aime les connexions stables et les relations durables.",
|
|
ariaLabel: "Une offre exclusive de TARGO",
|
|
|
|
rows: ({ textBlock, imageBlock, buttonBlock, htmlBlock, dividerBlock, row }) => [
|
|
|
|
row([
|
|
htmlBlock({ html: "{{#view_url}}<div style=\"margin:0px auto;max-width:600px;padding:8px 36px 4px;text-align:center;\"><a href=\"{{view_url}}\" style=\"font-family:Plus Jakarta Sans, Helvetica, Arial, sans-serif;font-size:11px;color:#94a3b8;text-decoration:underline;\">Affichage incorrect ? Voir dans le navigateur</a></div>{{/view_url}}", padding: "8px 36px 4px" }), // view-in-browser-link
|
|
], { backgroundColor: "#F5FAF7", border: '1px solid #e5e7eb' }),
|
|
|
|
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" }), // header-logo (centered)
|
|
textBlock({ html: "Bonjour {{firstname}},", padding: "10px 25px 14px", fontSize: "16px", fontWeight: 400, color: "#374151", textAlign: "left", lineHeight: "150%" }), // greeting
|
|
textBlock({ html: "Avec l'arrivée de l'été, voici un <strong>cadeau pour toi, disponible pour un temps limité</strong>.<br><br>On veut te remercier pour ta loyauté envers l'achat local.<br />Comme toi, on aime les connexions stables et les relations durables.", padding: "10px 25px 14px", fontSize: "16px", fontWeight: 400, color: "#374151", textAlign: "justify", lineHeight: "150%" }), // intro
|
|
textBlock({ html: "Grâce à la confiance de nos clients, on offre maintenant les forfaits à <strong>la plus haute vitesse dans le secteur</strong>, jusqu'à <strong>3.5 Gbit/s</strong>.<br />Que tu souhaites plus de vitesse, battre une autre offre ou faire optimiser des équipements, n'hésite pas. On est juste à côté et on aime aider.", padding: "10px 25px 0px", fontSize: "16px", fontWeight: 400, color: "#374151", textAlign: "justify", lineHeight: "150%" }), // intro
|
|
htmlBlock({ html: "<div style=\"font-family:Plus Jakarta Sans, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.5;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: "18px 36px 8px" }), // option-1-chip
|
|
htmlBlock({ html: "<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"\" width=\"100%\"><tbody><tr><td align=\"left\" style=\"font-size:0px;padding:0 0 8px;word-break:break-word;\"><div style=\"font-family:Plus Jakarta Sans, Helvetica, Arial, sans-serif;font-size:16px;font-weight:700;line-height:1.5;text-align:left;color:#1B2E24;\">🎁 {{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></td></tr><tr><td align=\"left\" style=\"font-size:0px;padding:0 0 4px;word-break:break-word;\"><div style=\"font-family:Plus Jakarta Sans, Helvetica, Arial, sans-serif;font-size:14px;line-height:1.5;text-align:left;color:#64748B;\">⚡ Disponible instantanément sur Giftbit en cliquant sur ton montant</div></td></tr><tr><td align=\"left\" style=\"font-size:0px;padding:0;word-break:break-word;\"><div style=\"font-family:Plus Jakarta Sans, Helvetica, Arial, sans-serif;font-size:14px;line-height:1.5;text-align:left;color:#64748B;\">🤝 Condition : Maintenir l'abonnement {{commitment_months}} mois ou +</div></td></tr></tbody></table>", padding: "18px 36px 22px" }), // brand-logos-card
|
|
buttonBlock({ text: "🎁 {{amount}}", href: "{{gift_url}}", padding: "10px 25px", buttonPadding: "30px 24px", bgColor: "#00C853", color: "#ffffff", borderRadius: "12px", fontSize: "32px" }), // cta
|
|
htmlBlock({ html: "{{#expires_at_date}}\n <div style=\"background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;\">\n <table align=\"center\" border=\"0\" cellpadding=\"0\" cellspacing=\"0\" role=\"presentation\" style=\"background:#ffffff;background-color:#ffffff;width:100%;\">\n <tbody><tr><td style=\"border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;direction:ltr;font-size:0px;padding:0 36px 4px;text-align:center;\">\n <div style=\"font-family:Plus Jakarta Sans, Helvetica, Arial, sans-serif;font-size:13px;line-height:1.4;text-align:center;color:#64748B;\">\n ⏰ Cadeau valide jusqu'au <strong style=\"color:#1B2E24;\">{{expires_at_date}}</strong>\n </div>\n </td></tr></tbody>\n </table>\n </div>\n {{/expires_at_date}}", padding: "0 36px 4px" }), // expiry-badge
|
|
textBlock({ html: "🪂 Annulation avant {{commitment_months}} mois : seulement à rembourser au prorata des mois restants.", padding: "10px 36px 22px", fontSize: "14px", fontWeight: 400, color: "#6b7280", textAlign: "left", lineHeight: "150%" }), // prorata
|
|
htmlBlock({ html: "<div style=\"font-family:Plus Jakarta Sans, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.5;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: "18px 36px 6px" }), // option-2-chip
|
|
textBlock({ html: "Ne rien faire. Aucun changement à ton abonnement actuel.", padding: "6px 36px 22px", fontSize: "15px", fontWeight: 400, color: "#4b5563", textAlign: "left", lineHeight: "155%" }), // option-2-text
|
|
textBlock({ html: "🤝 Merci de faire rouler l'économie de notre région avec nous !<br><br>L'équipe TARGO", padding: "18px 36px 28px", fontSize: "15px", fontWeight: 400, color: "#1B2E24", textAlign: "left", lineHeight: "150%" }), // signature
|
|
], { backgroundColor: "#ffffff", border: '1px solid #e5e7eb' }),
|
|
|
|
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", fontWeight: 400, color: "#64748B", textAlign: "center", lineHeight: "155%" }), // contact-info
|
|
], { backgroundColor: "#F5FAF7", border: '1px solid #e5e7eb' }),
|
|
|
|
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" }), // footer-logo (split for proper centering)
|
|
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%" }), // footer-text
|
|
], { backgroundColor: "#1C1E26", border: '1px solid #e5e7eb' }),
|
|
|
|
],
|
|
}
|