gigafibre-fsm/services/targo-hub/templates/gift-email-fr-native.json
louispaulb 0fb9089f4e fix(campaigns/templates): center logos via nested-table pattern
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>
2026-06-01 18:45:30 -04:00

708 lines
28 KiB
JSON

{
"counters": {
"u_row": 4,
"u_column": 4,
"u_content_text": 8,
"u_content_image": 2,
"u_content_button": 1,
"u_content_divider": 0,
"u_content_html": 5
},
"body": {
"id": "u_body",
"rows": [
{
"id": "u_row_1",
"cells": [
1
],
"columns": [
{
"id": "u_column_1",
"contents": [
{
"id": "u_content_html_1",
"type": "html",
"values": {
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"hideDesktop": false,
"displayCondition": null,
"containerPadding": "8px 36px 4px",
"anchor": "",
"_meta": {
"htmlID": "u_content_html_1",
"htmlClassNames": "u_content_html"
},
"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}}"
}
}
],
"values": {
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"hideDesktop": false,
"displayCondition": null,
"_meta": {
"htmlID": "u_column_1",
"htmlClassNames": "u_column"
},
"padding": "0px",
"border": {},
"borderRadius": "0px",
"backgroundColor": ""
}
}
],
"values": {
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"hideDesktop": false,
"displayCondition": null,
"columns": false,
"backgroundColor": "#F5FAF7",
"columnsBackgroundColor": "",
"backgroundImage": {
"url": "",
"fullWidth": true,
"repeat": "no-repeat",
"size": "custom",
"position": "center"
},
"padding": "0px",
"anchor": "",
"borderRadius": "",
"_meta": {
"htmlID": "u_row_1",
"htmlClassNames": "u_row"
}
}
},
{
"id": "u_row_2",
"cells": [
1
],
"columns": [
{
"id": "u_column_2",
"contents": [
{
"id": "u_content_image_1",
"type": "image",
"values": {
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"hideDesktop": false,
"displayCondition": null,
"containerPadding": "28px 36px 22px",
"anchor": "",
"src": {
"url": "https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content",
"width": 140,
"height": "auto",
"autoWidth": false,
"maxWidth": "140px"
},
"textAlign": "center",
"altText": "TARGO",
"action": {
"name": "web",
"values": {
"href": "",
"target": "_blank"
}
},
"_meta": {
"htmlID": "u_content_image_1",
"htmlClassNames": "u_content_image"
}
}
},
{
"id": "u_content_text_1",
"type": "text",
"values": {
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"hideDesktop": false,
"displayCondition": null,
"containerPadding": "10px 25px 14px",
"anchor": "",
"fontWeight": 400,
"fontSize": "16px",
"color": "#374151",
"textAlign": "left",
"lineHeight": "150%",
"linkStyle": {
"inherit": true
},
"_meta": {
"htmlID": "u_content_text_1",
"htmlClassNames": "u_content_text"
},
"text": "Bonjour {{firstname}},"
}
},
{
"id": "u_content_text_2",
"type": "text",
"values": {
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"hideDesktop": false,
"displayCondition": null,
"containerPadding": "10px 25px 14px",
"anchor": "",
"fontWeight": 400,
"fontSize": "16px",
"color": "#374151",
"textAlign": "justify",
"lineHeight": "150%",
"linkStyle": {
"inherit": true
},
"_meta": {
"htmlID": "u_content_text_2",
"htmlClassNames": "u_content_text"
},
"text": "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."
}
},
{
"id": "u_content_text_3",
"type": "text",
"values": {
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"hideDesktop": false,
"displayCondition": null,
"containerPadding": "10px 25px 0px",
"anchor": "",
"fontWeight": 400,
"fontSize": "16px",
"color": "#374151",
"textAlign": "justify",
"lineHeight": "150%",
"linkStyle": {
"inherit": true
},
"_meta": {
"htmlID": "u_content_text_3",
"htmlClassNames": "u_content_text"
},
"text": "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&nbsp;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."
}
},
{
"id": "u_content_html_2",
"type": "html",
"values": {
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"hideDesktop": false,
"displayCondition": null,
"containerPadding": "18px 36px 8px",
"anchor": "",
"_meta": {
"htmlID": "u_content_html_2",
"htmlClassNames": "u_content_html"
},
"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>"
}
},
{
"id": "u_content_html_3",
"type": "html",
"values": {
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"hideDesktop": false,
"displayCondition": null,
"containerPadding": "18px 36px 22px",
"anchor": "",
"_meta": {
"htmlID": "u_content_html_3",
"htmlClassNames": "u_content_html"
},
"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>"
}
},
{
"id": "u_content_button_1",
"type": "button",
"values": {
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"hideDesktop": false,
"displayCondition": null,
"containerPadding": "10px 25px",
"anchor": "",
"href": {
"name": "web",
"values": {
"href": "{{gift_url}}",
"target": "_blank"
}
},
"buttonColors": {
"color": "#ffffff",
"backgroundColor": "#00C853",
"hoverColor": "#ffffff",
"hoverBackgroundColor": "#005026"
},
"size": {
"autoWidth": false,
"width": "100%"
},
"fontSize": "32px",
"fontWeight": 700,
"textAlign": "center",
"lineHeight": "120%",
"padding": "30px 24px",
"border": {},
"borderRadius": "12px",
"_meta": {
"htmlID": "u_content_button_1",
"htmlClassNames": "u_content_button"
},
"text": "<span style=\"font-size: 32px; line-height: 120%; font-weight: 700;\">🎁&nbsp;&nbsp;{{amount}}</span>"
}
},
{
"id": "u_content_html_4",
"type": "html",
"values": {
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"hideDesktop": false,
"displayCondition": null,
"containerPadding": "0 36px 4px",
"anchor": "",
"_meta": {
"htmlID": "u_content_html_4",
"htmlClassNames": "u_content_html"
},
"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}}"
}
},
{
"id": "u_content_text_4",
"type": "text",
"values": {
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"hideDesktop": false,
"displayCondition": null,
"containerPadding": "10px 36px 22px",
"anchor": "",
"fontWeight": 400,
"fontSize": "14px",
"color": "#6b7280",
"textAlign": "left",
"lineHeight": "150%",
"linkStyle": {
"inherit": true
},
"_meta": {
"htmlID": "u_content_text_4",
"htmlClassNames": "u_content_text"
},
"text": "🪂 Annulation avant {{commitment_months}} mois : seulement à rembourser au prorata des mois restants."
}
},
{
"id": "u_content_html_5",
"type": "html",
"values": {
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"hideDesktop": false,
"displayCondition": null,
"containerPadding": "18px 36px 6px",
"anchor": "",
"_meta": {
"htmlID": "u_content_html_5",
"htmlClassNames": "u_content_html"
},
"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>"
}
},
{
"id": "u_content_text_5",
"type": "text",
"values": {
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"hideDesktop": false,
"displayCondition": null,
"containerPadding": "6px 36px 22px",
"anchor": "",
"fontWeight": 400,
"fontSize": "15px",
"color": "#4b5563",
"textAlign": "left",
"lineHeight": "155%",
"linkStyle": {
"inherit": true
},
"_meta": {
"htmlID": "u_content_text_5",
"htmlClassNames": "u_content_text"
},
"text": "Ne rien faire. Aucun changement à ton abonnement actuel."
}
},
{
"id": "u_content_text_6",
"type": "text",
"values": {
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"hideDesktop": false,
"displayCondition": null,
"containerPadding": "18px 36px 28px",
"anchor": "",
"fontWeight": 400,
"fontSize": "15px",
"color": "#1B2E24",
"textAlign": "left",
"lineHeight": "150%",
"linkStyle": {
"inherit": true
},
"_meta": {
"htmlID": "u_content_text_6",
"htmlClassNames": "u_content_text"
},
"text": "🤝 Merci de faire rouler l'économie de notre région avec nous !<br><br>L'équipe TARGO"
}
}
],
"values": {
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"hideDesktop": false,
"displayCondition": null,
"_meta": {
"htmlID": "u_column_2",
"htmlClassNames": "u_column"
},
"padding": "0px",
"border": {},
"borderRadius": "0px",
"backgroundColor": ""
}
}
],
"values": {
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"hideDesktop": false,
"displayCondition": null,
"columns": false,
"backgroundColor": "#ffffff",
"columnsBackgroundColor": "",
"backgroundImage": {
"url": "",
"fullWidth": true,
"repeat": "no-repeat",
"size": "custom",
"position": "center"
},
"padding": "0px",
"anchor": "",
"borderRadius": "",
"_meta": {
"htmlID": "u_row_2",
"htmlClassNames": "u_row"
}
}
},
{
"id": "u_row_3",
"cells": [
1
],
"columns": [
{
"id": "u_column_3",
"contents": [
{
"id": "u_content_text_7",
"type": "text",
"values": {
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"hideDesktop": false,
"displayCondition": null,
"containerPadding": "18px 36px 8px",
"anchor": "",
"fontWeight": 400,
"fontSize": "12px",
"color": "#64748B",
"textAlign": "center",
"lineHeight": "155%",
"linkStyle": {
"inherit": true
},
"_meta": {
"htmlID": "u_content_text_7",
"htmlClassNames": "u_content_text"
},
"text": "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>."
}
}
],
"values": {
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"hideDesktop": false,
"displayCondition": null,
"_meta": {
"htmlID": "u_column_3",
"htmlClassNames": "u_column"
},
"padding": "0px",
"border": {},
"borderRadius": "0px",
"backgroundColor": ""
}
}
],
"values": {
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"hideDesktop": false,
"displayCondition": null,
"columns": false,
"backgroundColor": "#F5FAF7",
"columnsBackgroundColor": "",
"backgroundImage": {
"url": "",
"fullWidth": true,
"repeat": "no-repeat",
"size": "custom",
"position": "center"
},
"padding": "0px",
"anchor": "",
"borderRadius": "",
"_meta": {
"htmlID": "u_row_3",
"htmlClassNames": "u_row"
}
}
},
{
"id": "u_row_4",
"cells": [
1
],
"columns": [
{
"id": "u_column_4",
"contents": [
{
"id": "u_content_image_2",
"type": "image",
"values": {
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"hideDesktop": false,
"displayCondition": null,
"containerPadding": "26px 36px 0",
"anchor": "",
"src": {
"url": "https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content",
"width": 120,
"height": "auto",
"autoWidth": false,
"maxWidth": "120px"
},
"textAlign": "center",
"altText": "TARGO",
"action": {
"name": "web",
"values": {
"href": "",
"target": "_blank"
}
},
"_meta": {
"htmlID": "u_content_image_2",
"htmlClassNames": "u_content_image"
}
}
},
{
"id": "u_content_text_8",
"type": "text",
"values": {
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"hideDesktop": false,
"displayCondition": null,
"containerPadding": "12px 36px 22px",
"anchor": "",
"fontWeight": 400,
"fontSize": "11px",
"color": "rgba(255,255,255,0.55)",
"textAlign": "center",
"lineHeight": "155%",
"linkStyle": {
"inherit": true
},
"_meta": {
"htmlID": "u_content_text_8",
"htmlClassNames": "u_content_text"
},
"text": "<a href=\"https://www.targo.ca\" style=\"color:rgba(255,255,255,0.7);text-decoration:none;\">www.targo.ca</a>&nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br />© {{year}} TARGO Communications · Tous droits réservés."
}
}
],
"values": {
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"hideDesktop": false,
"displayCondition": null,
"_meta": {
"htmlID": "u_column_4",
"htmlClassNames": "u_column"
},
"padding": "0px",
"border": {},
"borderRadius": "0px",
"backgroundColor": ""
}
}
],
"values": {
"selectable": true,
"draggable": true,
"duplicatable": true,
"deletable": true,
"hideable": true,
"hideDesktop": false,
"displayCondition": null,
"columns": false,
"backgroundColor": "#1C1E26",
"columnsBackgroundColor": "",
"backgroundImage": {
"url": "",
"fullWidth": true,
"repeat": "no-repeat",
"size": "custom",
"position": "center"
},
"padding": "0px",
"anchor": "",
"borderRadius": "",
"_meta": {
"htmlID": "u_row_4",
"htmlClassNames": "u_row"
}
}
}
],
"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": "Comme toi, on aime les connexions stables et les relations durables.",
"linkStyle": {
"body": true,
"linkColor": "#00C853",
"linkHoverColor": "#005026",
"linkUnderline": true,
"linkHoverUnderline": true
},
"_meta": {
"htmlID": "u_body",
"htmlClassNames": "u_body"
}
}
},
"schemaVersion": 16
}