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

feat(campaigns): MJML canonical templates + test-send button

Browse Source 
Two big moves:

1. Promote MJML to the canonical template format
   - Move gift-email-fr-mjml.{mjml,html} → gift-email-fr.{mjml,html}
   - Create gift-email-en.mjml (English translation of FR MJML)
   - Compile EN MJML → gift-email-en.html
   - Remove obsolete variants:
     • gift-email-fr-simple.html (now replaced by MJML)
     • gift-email-en-simple.html (same)
     • gift-email-fr-mjml.* (renamed to canonical)
   - The old gift-email-fr.html (rich-with-merchant-grid version) is
     backed up as gift-email-fr.legacy-rich.html.bak — kept on disk
     for reference but not in the editable list.
   - EDITABLE_TEMPLATES is now just ['gift-email-fr', 'gift-email-en'],
     both backed by .mjml source + .html auto-compiled output.

2. Add "Envoyer un test" feature
   Backend:
   - POST /campaigns/templates/:name/test-send accepts { to, vars,
     from?, subject? }. Reads compiled .html, renders Mustache vars,
     sends via Mailjet through email.sendEmail with X-MJ-CustomID
     "test-send:<name>:<timestamp>" so webhook events for tests are
     identifiable. Returns { sent, to, from, message_id, bytes }.
   - Default vars are sensible: firstname="Louis", amount="60 $",
     gift_url="https://gft.link/TEST123", etc. User overrides any
     via the request body.

   Frontend (TemplateEditorPage):
   - Toolbar button "Envoyer un test" (orange) — opens a dialog.
   - Dialog has email input + subject + 7 variable inputs
     (firstname, lastname, amount, commitment_months, gift_url,
     description, expiry) with sensible defaults.
   - "Dirty" banner warning: if the user has unsaved changes, the
     test will use the LAST SAVED version (so save first to test the
     latest). Mentions explicitly in card footer.
   - On send: live notification with the message_id + byte count.
     Errors surface clearly.

Verified live in prod:
  POST /campaigns/templates/gift-email-fr/test-send → 200, message_id
  returned, ~32 KB rendered MJML→HTML output, sent from
  TARGO <support@targointernet.com> (Mailjet-validated sender).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
louispaulb 2026-05-21 22:36:35 -04:00
parent b37270c11d
commit 79ae38db60
18 changed files with 3931 additions and 3615 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
apps/ops/src/api/campaigns.js
View File

@ -124,6 +124,15 @@ export function previewTemplate (name, { html, vars } = {}) {
})
}
// Send ONE rendered email to a specific address for visual QA.
// Pass { to, vars, from?, subject? } — defaults filled in server-side.
export function testSendTemplate (name, { to, vars, from, subject } = {}) {
return hubFetch(`/campaigns/templates/${encodeURIComponent(name)}/test-send`, {
method: 'POST',
body: { to, vars, from, subject },
})
}
/**
* Returns the URL for the SSE channel of one campaign. The Hub broadcasts on
* topic `campaign:<id>` so we subscribe to that single topic. Use with:

89
apps/ops/src/modules/campaigns/pages/TemplateEditorPage.vue
View File

@ -17,6 +17,9 @@
{ label: 'HTML', value: 'html' },
{ label: 'Aperçu', value: 'preview' },
]" dense unelevated toggle-color="primary" />
<q-btn flat color="orange-9" icon="send" label="Envoyer un test" class="q-ml-sm" @click="testSendOpen = true">
<q-tooltip>Envoie un courriel réel à une adresse de test avec des variables personnalisées</q-tooltip>
</q-btn>
<q-btn flat icon="undo" label="Annuler" class="q-ml-sm" :disable="!dirty" @click="discardChanges">
<q-tooltip>Annuler les changements non sauvegardés</q-tooltip>
</q-btn>
@ -24,6 +27,51 @@
:loading="saving" :disable="!dirty" @click="save" />
</div>
<!-- Test-send dialog: lets you fire ONE rendered email to any address
with custom variable values. Always saves first if dirty (otherwise
the test would render the OLD template — confusing). -->
<q-dialog v-model="testSendOpen" persistent>
<q-card style="min-width: 500px; max-width: 90vw">
<q-card-section class="row items-center bg-orange-1 text-orange-9">
<q-icon name="send" class="q-mr-sm" />
<div class="text-h6">Envoyer un test du courriel</div>
<q-space />
<q-btn flat dense round icon="close" v-close-popup />
</q-card-section>
<q-card-section>
<q-banner v-if="dirty" class="bg-amber-1 text-amber-9 q-mb-md" rounded dense>
<q-icon name="warning" class="q-mr-xs" />
Tu as des changements non sauvegardés. Sauvegarde avant d'envoyer pour tester la dernière version.
</q-banner>
<q-input v-model="testSendForm.to" label="Adresse de destination" outlined dense
type="email" autofocus class="q-mb-md"
hint="L'email de test sera envoyé via Mailjet à cette adresse" />
<q-input v-model="testSendForm.subject" label="Sujet" outlined dense class="q-mb-md" />
<div class="text-subtitle2 q-mb-sm">Variables (pour le rendu)</div>
<div class="row q-col-gutter-sm">
<q-input v-model="testSendForm.vars.firstname" label="firstname" outlined dense class="col-6" />
<q-input v-model="testSendForm.vars.lastname" label="lastname" outlined dense class="col-6" />
<q-input v-model="testSendForm.vars.amount" label="amount" outlined dense class="col-6" />
<q-input v-model="testSendForm.vars.commitment_months" label="commitment_months" outlined dense class="col-6" />
<q-input v-model="testSendForm.vars.gift_url" label="gift_url" outlined dense class="col-12" />
<q-input v-model="testSendForm.vars.description" label="description (adresse)" outlined dense class="col-12" />
<q-input v-model="testSendForm.vars.expiry" label="expiry (optionnel)" outlined dense class="col-12" />
</div>
</q-card-section>
<q-card-section class="bg-grey-2">
<div class="text-caption text-grey-8">
Envoyé via Mailjet depuis <code>TARGO &lt;support@targointernet.com&gt;</code> (sender validé).
Le rendu utilisera le HTML compilé actuellement sauvegardé sur disque (pas les modifs non-sauvegardées).
</div>
</q-card-section>
<q-card-actions align="right">
<q-btn flat label="Annuler" v-close-popup />
<q-btn unelevated color="primary" icon-right="send" label="Envoyer le test maintenant"
:loading="testSending" :disable="!testSendForm.to" @click="doTestSend" />
</q-card-actions>
</q-card>
</q-dialog>
<!-- Hint banner: visual mode is best for new templates, HTML for existing -->
<q-banner v-if="viewMode === 'visual' && !blankCanvas" class="bg-amber-1 text-amber-9 q-px-md q-py-xs" style="border-bottom:1px solid #fde68a">
<q-icon name="lightbulb" class="q-mr-xs" />
@ -72,7 +120,7 @@ import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useQuasar } from 'quasar'
import { listTemplates, getTemplate, saveTemplate, previewTemplate,
listAssets, uploadAsset } from 'src/api/campaigns'
testSendTemplate, listAssets, uploadAsset } from 'src/api/campaigns'
import grapesjs from 'grapesjs'
import 'grapesjs/dist/css/grapes.min.css'
import presetNewsletter from 'grapesjs-preset-newsletter'
@ -97,6 +145,45 @@ const blankCanvas = ref(false) // true after clicking "Vide" — hides the "us
const templateFormat = ref('html') // 'mjml' | 'html' — drives editor plugin choice + save body shape
const mjmlSource = ref('') // when format=mjml, this holds the MJML source separately from the rendered HTML
// ── Test-send dialog state ──────────────────────────────────────────────────
const testSendOpen = ref(false)
const testSending = ref(false)
const testSendForm = ref({
to: 'louis@targo.ca',
subject: '[TEST] Aperçu du courriel TARGO',
vars: {
firstname: 'Louis',
lastname: 'Test',
amount: '60 $',
commitment_months: '3',
gift_url: 'https://gft.link/TEST123',
description: '123 Rue de Test, Ste-Clotilde',
expiry: '31 décembre 2026',
},
})
async function doTestSend () {
testSending.value = true
try {
const r = await testSendTemplate(currentName.value, {
to: testSendForm.value.to.trim(),
subject: testSendForm.value.subject,
vars: testSendForm.value.vars,
})
$q.notify({
type: 'positive',
message: `Test envoyé à ${r.to}`,
caption: `${r.bytes} octets via ${r.from}`,
timeout: 5000,
})
testSendOpen.value = false
} catch (e) {
$q.notify({ type: 'negative', message: 'Échec envoi test: ' + e.message, timeout: 6000 })
} finally {
testSending.value = false
}
}
// Derive the editor's spell-check language from the template name suffix.
// gift-email-fr → fr, gift-email-en → en, etc. Browser's built-in dictionary
// (Chrome/Safari/Firefox) uses this to flag typos in the correct language.

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

@ -1,155 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>An exclusive offer from TARGO</title>
<!-- Brand fonts via Google Fonts. Outlook desktop skips this (MSO conditional)
and falls back to Helvetica/Arial through the font-family stack. -->
<!--[if !mso]><!-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
<!--<![endif]-->
</head>
<!-- ──────────────────────────────────────────────────────────────────────────
SIMPLE-STACK email template — each <section> is one independent table.
Designed to parse cleanly in GrapesJS-preset-newsletter so you can edit
visually in the ops UI editor. Max 1 level of table nesting per section.
Vertically-stacked tables share background colors to appear as one card.
────────────────────────────────────────────────────────────────────── -->
<body style="margin:0;padding:0;background:#F5FAF7;font-family:'Plus Jakarta Sans','Helvetica Neue',Helvetica,Arial,sans-serif;color:#1B2E24;line-height:1.5;">
<!-- Outer centering wrapper (not part of the editable content) -->
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="background:#F5FAF7;">
<tr><td align="center" style="padding:32px 16px;">
<!-- ════════ SECTION 1: Header logo ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border:1px solid #e5e7eb;border-bottom:none;border-radius:12px 12px 0 0;">
<tr><td style="padding:28px 36px 22px;border-bottom:1px solid #eef0ee;">
<img src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content"
alt="TARGO" width="140" style="display:block;border:0;outline:none;text-decoration:none;max-width:140px;height:auto;">
</td></tr>
</table>
<!-- ════════ SECTION 2: Greeting + brand line ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:26px 36px 18px;">
<p style="margin:0 0 14px;font-size:1rem;color:#374151;">Hi {{firstname}},</p>
<p style="margin:0 0 14px;font-size:1.08rem;color:#1B2E24;font-weight:500;">
Just like you, we love stable connections and lasting relationships.
</p>
<p style="margin:0;font-size:1rem;color:#374151;">
Summer's here, and so is your
<strong>limited-time exclusive offer</strong>:
</p>
</td></tr>
</table>
<!-- ════════ SECTION 3: Compact info block (3 pills → 1 card) ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:0 36px 22px;">
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="background:#F5FAF7;border-radius:10px;">
<tr><td style="padding:18px 22px;">
<p style="margin:0 0 8px;font-size:1rem;font-weight:700;color:#1B2E24;">🎁 {{amount}} at hundreds of brands</p>
<p style="margin:0 0 4px;font-size:0.92rem;color:#64748B;">⚡ Instant on activation</p>
<p style="margin:0;font-size:0.92rem;color:#64748B;">🤝 Stay with us {{commitment_months}}+ months</p>
</td></tr>
</table>
</td></tr>
</table>
<!-- ════════ SECTION 4: Option 1 chip ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:18px 36px 8px;border-top:1px solid #eef0ee;">
<span style="display:inline-block;background:#E6F9EE;color:#00C853;font-size:0.82rem;font-weight:700;padding:5px 12px;border-radius:6px;">✅ Option 1</span>
</td></tr>
</table>
<!-- ════════ SECTION 5: Big green CTA button ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:8px 36px;">
<a href="{{gift_url}}" style="display:block;text-decoration:none;background:#00C853;background-image:linear-gradient(135deg,#00C853 0%,#005026 100%);border-radius:12px;padding:30px 24px;text-align:center;color:#ffffff;">
<span style="display:block;font-family:'Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:2.2rem;font-weight:700;line-height:1;color:#ffffff;">🎁&nbsp;&nbsp;{{amount}}</span>
<span style="display:block;margin-top:14px;font-size:1.08rem;font-weight:700;color:#ffffff;">Redeem my gift card</span>
<span style="display:block;margin-top:6px;font-size:0.85rem;color:#ffffff;opacity:0.9;">Pick your brand on Giftbit →</span>
</a>
</td></tr>
</table>
<!-- ════════ SECTION 6: Prorata refund disclaimer ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:10px 36px 22px;">
<p style="margin:0;font-size:0.85rem;color:#6b7280;">
🪂 If you leave before {{commitment_months}} months, the prorated amount is refundable.
</p>
</td></tr>
</table>
<!-- ════════ SECTION 7: Option 2 chip + text ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:18px 36px 6px;border-top:1px solid #eef0ee;">
<span style="display:inline-block;background:#F5FAF7;color:#6b7280;font-size:0.82rem;font-weight:700;padding:5px 12px;border-radius:6px;">⏭️ Option 2</span>
</td></tr>
</table>
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:6px 36px 22px;">
<p style="margin:0;font-size:0.97rem;color:#4b5563;line-height:1.55;">
Do nothing. Your monthly subscription continues as usual — no commitment, no gift card.
</p>
</td></tr>
</table>
{{#expiry}}
<!-- ════════ SECTION 8 (optional): Expiry notice ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:14px 36px 0;border-top:1px solid #eef0ee;">
<p style="margin:0;font-size:0.85rem;color:#9ca3af;">
⏰ This offer expires on <strong style="color:#374151;">{{expiry}}</strong>.
</p>
</td></tr>
</table>
{{/expiry}}
<!-- ════════ SECTION 9: Signature ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;border-radius:0 0 12px 12px;">
<tr><td style="padding:18px 36px 28px;border-top:1px solid #eef0ee;">
<p style="margin:0;font-size:0.97rem;color:#1B2E24;">🤝 Thanks for helping our regional economy thrive!</p>
<p style="margin:8px 0 0;font-size:0.9rem;color:#64748B;">The TARGO team</p>
</td></tr>
</table>
<!-- ════════ SECTION 10: Contact info (outside card) ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;">
<tr><td style="padding:18px 36px 8px;text-align:center;">
<p style="margin:0;font-size:0.78rem;color:#64748B;line-height:1.55;">
You're getting this email because you're a TARGO customer at
<strong style="color:#1B2E24;">{{description}}</strong>.<br>
Got a question? Write to
<a href="mailto:support@targo.ca" style="color:#00C853;text-decoration:none;">support@targo.ca</a>
or call
<a href="tel:5144480773" style="color:#00C853;text-decoration:none;">514&nbsp;448-0773</a>.
Support&nbsp;7&nbsp;days/week.
</p>
</td></tr>
</table>
<!-- ════════ SECTION 11: Dark footer band ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#1C1E26;border-radius:12px;margin-top:12px;">
<tr><td style="padding:26px 36px 22px;text-align:center;">
<img src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content"
alt="TARGO" width="120" style="display:inline-block;border:0;outline:none;text-decoration:none;max-width:120px;height:auto;">
<p style="margin:18px 0 0;font-size:0.7rem;color:rgba(255,255,255,0.45);line-height:1.55;">
<a href="https://www.targo.ca" style="color:rgba(255,255,255,0.7);text-decoration:none;">www.targo.ca</a>
&nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br>
© {{year}} TARGO Communications · All rights reserved.
</p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>

1116
scripts/campaigns/templates/gift-email-en.html
View File

File diff suppressed because it is too large Load Diff

132
scripts/campaigns/templates/gift-email-en.mjml Normal file
View File

@ -0,0 +1,132 @@
<mjml>
<mj-head>
<mj-title>An exclusive offer from TARGO</mj-title>
<mj-preview>Just like you, we love stable connections and lasting relationships.</mj-preview>
<mj-font name="Plus Jakarta Sans" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" />
<mj-font name="Space Grotesk" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap" />
<mj-attributes>
<mj-all font-family="Plus Jakarta Sans, Helvetica, Arial, sans-serif" />
<mj-body background-color="#F5FAF7" />
<mj-text color="#1B2E24" line-height="1.5" font-size="16px" />
<mj-button background-color="#00C853" color="#ffffff" font-weight="700" border-radius="12px" />
</mj-attributes>
</mj-head>
<mj-body background-color="#F5FAF7" width="600px">
<!-- ════════ HEADER LOGO ════════ -->
<mj-section background-color="#ffffff" border="1px solid #e5e7eb" border-bottom="none" border-radius="12px 12px 0 0" padding="28px 36px 22px">
<mj-column>
<mj-image src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content"
alt="TARGO" width="140px" align="left" padding="0" />
</mj-column>
</mj-section>
<!-- ════════ GREETING + BRAND LINE ════════ -->
<mj-section background-color="#ffffff" border-left="1px solid #e5e7eb" border-right="1px solid #e5e7eb" border-top="1px solid #eef0ee" padding="26px 36px 0">
<mj-column>
<mj-text color="#374151" font-size="16px" padding-bottom="14px">Hi {{firstname}},</mj-text>
<mj-text font-size="17px" font-weight="500" color="#1B2E24" padding-bottom="14px">
Just like you, we love stable connections and lasting relationships.
</mj-text>
<mj-text color="#374151" padding-bottom="0">
Summer's here, and so is your <strong>limited-time exclusive offer</strong>:
</mj-text>
</mj-column>
</mj-section>
<!-- ════════ COMPACT INFO CARD ════════ -->
<mj-section background-color="#ffffff" border-left="1px solid #e5e7eb" border-right="1px solid #e5e7eb" padding="18px 36px 22px">
<mj-column background-color="#F5FAF7" border-radius="10px" padding="18px 22px">
<mj-text font-weight="700" color="#1B2E24" padding="0 0 8px">🎁 {{amount}} at hundreds of brands</mj-text>
<mj-text color="#64748B" font-size="14px" padding="0 0 4px">⚡ Instant on activation</mj-text>
<mj-text color="#64748B" font-size="14px" padding="0">🤝 Stay with us {{commitment_months}}+ months</mj-text>
</mj-column>
</mj-section>
<!-- ════════ OPTION 1 CHIP ════════ -->
<mj-section background-color="#ffffff" border-left="1px solid #e5e7eb" border-right="1px solid #e5e7eb" border-top="1px solid #eef0ee" padding="18px 36px 8px">
<mj-column>
<mj-text padding="0">
<span style="display:inline-block;background:#E6F9EE;color:#00C853;font-size:13px;font-weight:700;padding:5px 12px;border-radius:6px;">✅ Option 1</span>
</mj-text>
</mj-column>
</mj-section>
<!-- ════════ BIG GREEN CTA BUTTON ════════ -->
<mj-section background-color="#ffffff" border-left="1px solid #e5e7eb" border-right="1px solid #e5e7eb" padding="8px 36px">
<mj-column>
<mj-button href="{{gift_url}}"
background-color="#00C853" color="#ffffff"
inner-padding="30px 24px" border-radius="12px"
font-size="32px" font-weight="700"
font-family="Space Grotesk, Helvetica, Arial, sans-serif"
width="100%">
🎁&nbsp;&nbsp;{{amount}}
</mj-button>
</mj-column>
</mj-section>
<!-- ════════ PRORATA REFUND DISCLAIMER ════════ -->
<mj-section background-color="#ffffff" border-left="1px solid #e5e7eb" border-right="1px solid #e5e7eb" padding="10px 36px 22px">
<mj-column>
<mj-text color="#6b7280" font-size="14px" padding="0">
🪂 If you leave before {{commitment_months}} months, the prorated amount is refundable.
</mj-text>
</mj-column>
</mj-section>
<!-- ════════ OPTION 2 CHIP + TEXT ════════ -->
<mj-section background-color="#ffffff" border-left="1px solid #e5e7eb" border-right="1px solid #e5e7eb" border-top="1px solid #eef0ee" padding="18px 36px 6px">
<mj-column>
<mj-text padding="0">
<span style="display:inline-block;background:#F5FAF7;color:#6b7280;font-size:13px;font-weight:700;padding:5px 12px;border-radius:6px;">⏭️ Option 2</span>
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#ffffff" border-left="1px solid #e5e7eb" border-right="1px solid #e5e7eb" padding="6px 36px 22px">
<mj-column>
<mj-text color="#4b5563" font-size="15px" line-height="1.55" padding="0">
Do nothing. Your monthly subscription continues as usual — no commitment, no gift card.
</mj-text>
</mj-column>
</mj-section>
<!-- ════════ SIGNATURE ════════ -->
<mj-section background-color="#ffffff" border-left="1px solid #e5e7eb" border-right="1px solid #e5e7eb" border-bottom="1px solid #e5e7eb" border-top="1px solid #eef0ee" border-radius="0 0 12px 12px" padding="18px 36px 28px">
<mj-column>
<mj-text color="#1B2E24" font-size="15px" padding="0">🤝 Thanks for helping our regional economy thrive!</mj-text>
<mj-text color="#64748B" font-size="14px" padding="8px 0 0">The TARGO team</mj-text>
</mj-column>
</mj-section>
<!-- ════════ CONTACT INFO ════════ -->
<mj-section padding="18px 36px 8px">
<mj-column>
<mj-text align="center" color="#64748B" font-size="12px" line-height="1.55" padding="0">
You're getting this email because you're a TARGO customer at <strong style="color:#1B2E24;">{{description}}</strong>.<br />
Got a question? Write to
<a href="mailto:support@targo.ca" style="color:#00C853;text-decoration:none;">support@targo.ca</a>
or call
<a href="tel:5144480773" style="color:#00C853;text-decoration:none;">514&nbsp;448-0773</a>.
Support&nbsp;7&nbsp;days/week.
</mj-text>
</mj-column>
</mj-section>
<!-- ════════ DARK FOOTER BAND ════════ -->
<mj-section background-color="#1C1E26" border-radius="12px" padding="26px 36px 22px">
<mj-column>
<mj-image src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content"
alt="TARGO" width="120px" align="center" padding="0" />
<mj-text align="center" color="rgba(255,255,255,0.55)" font-size="11px" line-height="1.55" padding="18px 0 0">
<a href="https://www.targo.ca" style="color:rgba(255,255,255,0.7);text-decoration:none;">www.targo.ca</a>
&nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br />
© {{year}} TARGO Communications · All rights reserved.
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>

814
scripts/campaigns/templates/gift-email-fr-mjml.html
View File

@ -1,814 +0,0 @@
<!doctype html>
<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Une offre exclusive de TARGO</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a { padding:0; }
body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
p { display:block;margin:13px 0; }
</style>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet" type="text/css">
<style type="text/css">
@import url(https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap);
</style>
<!--<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 { width:100% !important; max-width: 100%; }
}
</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }
</style>
<style type="text/css">
@media only screen and (max-width:479px) {
table.mj-full-width-mobile { width: 100% !important; }
td.mj-full-width-mobile { width: auto !important; }
}
</style>
</head>
<body style="word-spacing:normal;background-color:#F5FAF7;">
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Comme toi, on aime les connexions stables et les relations durables.</div>
<div
aria-label="Une offre exclusive de TARGO" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#F5FAF7;"
>
<!-- ════════ HEADER LOGO ════════ -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;border-radius:12px 12px 0 0;overflow:hidden;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;border-collapse:separate;"
>
<tbody>
<tr>
<td
style="border:1px solid #e5e7eb;border-bottom:none;border-radius:12px 12px 0 0;direction:ltr;font-size:0px;padding:28px 36px 22px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:526px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="left" style="font-size:0px;padding:0;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"
>
<tbody>
<tr>
<td style="width:140px;">
<img
alt="TARGO" src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="140" height="auto"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- ════════ GREETING + BRAND LINE ════════ -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
>
<tbody>
<tr>
<td
style="border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;border-top:1px solid #eef0ee;direction:ltr;font-size:0px;padding:26px 36px 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:526px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="left" style="font-size:0px;padding:10px 25px;padding-bottom:14px;word-break:break-word;"
>
<div
style="font-family:Plus Jakarta Sans, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.5;text-align:left;color:#374151;"
>Bonjour {{firstname}},</div>
</td>
</tr>
<tr>
<td
align="left" style="font-size:0px;padding:10px 25px;padding-bottom:14px;word-break:break-word;"
>
<div
style="font-family:Plus Jakarta Sans, Helvetica, Arial, sans-serif;font-size:17px;font-weight:500;line-height:1.5;text-align:left;color:#1B2E24;"
>Comme toi, on aime les connexions stables et les relations durables.</div>
</td>
</tr>
<tr>
<td
align="left" style="font-size:0px;padding:10px 25px;padding-bottom:0;word-break:break-word;"
>
<div
style="font-family:Plus Jakarta Sans, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.5;text-align:left;color:#374151;"
>Avec l'arrivée de l'été, voici ton <strong>offre exclusive pour un temps limité</strong> :</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- ════════ COMPACT INFO CARD (was 3 pills) ════════ -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
>
<tbody>
<tr>
<td
style="border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;direction:ltr;font-size:0px;padding:18px 36px 22px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:526px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="border-collapse:separate;"
>
<tbody>
<tr>
<td style="background-color:#F5FAF7;border-radius:10px;vertical-align:top;border-collapse:separate;padding:18px 22px;">
<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</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;"
>⚡ Instantané à l'activation</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;"
>🤝 Rester encore {{commitment_months}} mois ou +</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- ════════ OPTION 1 CHIP ════════ -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
>
<tbody>
<tr>
<td
style="border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;border-top:1px solid #eef0ee;direction:ltr;font-size:0px;padding:18px 36px 8px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:526px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<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: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>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- ════════ BIG GREEN CTA BUTTON ════════ -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
>
<tbody>
<tr>
<td
style="border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;direction:ltr;font-size:0px;padding:8px 36px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:526px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;width:100%;line-height:100%;"
>
<tbody>
<tr>
<td
align="center" bgcolor="#00C853" role="presentation" style="border:none;border-radius:12px;cursor:auto;mso-padding-alt:30px 24px;background:#00C853;" valign="middle"
>
<a
href="{{gift_url}}" 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%;margin:0;text-decoration:none;text-transform:none;padding:30px 24px;mso-padding-alt:0px;border-radius:12px;" target="_blank"
>
🎁&nbsp;&nbsp;{{amount}}
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
align="center" class="cta-subtitle" style="font-size:0px;padding:0;word-break:break-word;"
>
<div
style="font-family:Plus Jakarta Sans, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.5;text-align:center;color:#ffffff;"
><!-- Sub-labels inside the button: not directly supported in mjml-button,
so we render them as a styled text block immediately below.
In the actual rendered output they appear visually under the
button text. --></div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- ════════ PRORATA REFUND DISCLAIMER ════════ -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
>
<tbody>
<tr>
<td
style="border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;direction:ltr;font-size:0px;padding:10px 36px 22px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:526px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<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:#6b7280;"
>🪂 En cas de départ avant {{commitment_months}} mois, le prorata du montant est remboursable.</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- ════════ OPTION 2 CHIP + TEXT ════════ -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
>
<tbody>
<tr>
<td
style="border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;border-top:1px solid #eef0ee;direction:ltr;font-size:0px;padding:18px 36px 6px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:526px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<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: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>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
>
<tbody>
<tr>
<td
style="border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;direction:ltr;font-size:0px;padding:6px 36px 22px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:526px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<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:15px;line-height:1.55;text-align:left;color:#4b5563;"
>Ne rien faire. Ton abonnement mensuel se poursuit normalement, sans engagement ni carte-cadeau.</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- ════════ SIGNATURE ════════ -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;border-radius:0 0 12px 12px;overflow:hidden;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;border-collapse:separate;"
>
<tbody>
<tr>
<td
style="border-bottom:1px solid #e5e7eb;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;border-top:1px solid #eef0ee;border-radius:0 0 12px 12px;direction:ltr;font-size:0px;padding:18px 36px 28px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:526px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<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:15px;line-height:1.5;text-align:left;color:#1B2E24;"
>🤝 Merci de faire rouler l'économie de notre région avec nous !</div>
</td>
</tr>
<tr>
<td
align="left" style="font-size:0px;padding:8px 0 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;"
>L'équipe TARGO</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- ════════ CONTACT INFO (outside card) ════════ -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:18px 36px 8px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:528px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:0;word-break:break-word;"
>
<div
style="font-family:Plus Jakarta Sans, Helvetica, Arial, sans-serif;font-size:12px;line-height:1.55;text-align:center;color:#64748B;"
>Tu reçois ce courriel parce que tu es client(e) TARGO à <strong style="color:#1B2E24;">{{description}}</strong>.<br />
Une question ? Écris à
<a href="mailto:support@targo.ca" style="color:#00C853;text-decoration:none;">support@targo.ca</a>
ou appelle au
<a href="tel:5144480773" style="color:#00C853;text-decoration:none;">514&nbsp;448-0773</a>.
Support&nbsp;7j/7.</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- ════════ DARK FOOTER BAND ════════ -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#1C1E26" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#1C1E26;background-color:#1C1E26;margin:0px auto;max-width:600px;border-radius:12px;overflow:hidden;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#1C1E26;background-color:#1C1E26;width:100%;border-collapse:separate;"
>
<tbody>
<tr>
<td
style="border-radius:12px;direction:ltr;font-size:0px;padding:26px 36px 22px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:528px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:0;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"
>
<tbody>
<tr>
<td style="width:120px;">
<img
alt="TARGO" src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="120" height="auto"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
align="center" style="font-size:0px;padding:18px 0 0;word-break:break-word;"
>
<div
style="font-family:Plus Jakarta Sans, Helvetica, Arial, sans-serif;font-size:11px;line-height:1.55;text-align:center;color:rgba(255,255,255,0.55);"
><a href="https://www.targo.ca" style="color:rgba(255,255,255,0.7);text-decoration:none;">www.targo.ca</a>
&nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br />
© {{year}} TARGO Communications · Tous droits réservés.</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
</body>
</html>

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

@ -1,155 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Une offre exclusive de TARGO</title>
<!-- Brand fonts via Google Fonts. Outlook desktop skips this (MSO conditional)
and falls back to Helvetica/Arial through the font-family stack. -->
<!--[if !mso]><!-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
<!--<![endif]-->
</head>
<!-- ──────────────────────────────────────────────────────────────────────────
SIMPLE-STACK email template — each <section> is one independent table.
Designed to parse cleanly in GrapesJS-preset-newsletter so you can edit
visually in the ops UI editor. Max 1 level of table nesting per section.
Vertically-stacked tables share background colors to appear as one card.
────────────────────────────────────────────────────────────────────── -->
<body style="margin:0;padding:0;background:#F5FAF7;font-family:'Plus Jakarta Sans','Helvetica Neue',Helvetica,Arial,sans-serif;color:#1B2E24;line-height:1.5;">
<!-- Outer centering wrapper (not part of the editable content) -->
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="background:#F5FAF7;">
<tr><td align="center" style="padding:32px 16px;">
<!-- ════════ SECTION 1: Header logo ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border:1px solid #e5e7eb;border-bottom:none;border-radius:12px 12px 0 0;">
<tr><td style="padding:28px 36px 22px;border-bottom:1px solid #eef0ee;">
<img src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content"
alt="TARGO" width="140" style="display:block;border:0;outline:none;text-decoration:none;max-width:140px;height:auto;">
</td></tr>
</table>
<!-- ════════ SECTION 2: Greeting + brand line ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:26px 36px 18px;">
<p style="margin:0 0 14px;font-size:1rem;color:#374151;">Bonjour {{firstname}},</p>
<p style="margin:0 0 14px;font-size:1.08rem;color:#1B2E24;font-weight:500;">
Comme toi, on aime les connexions stables et les relations durables.
</p>
<p style="margin:0;font-size:1rem;color:#374151;">
Avec l'arrivée de l'été, voici ton
<strong>offre exclusive pour un temps limité</strong> :
</p>
</td></tr>
</table>
<!-- ════════ SECTION 3: Compact info block (3 pills → 1 card) ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:0 36px 22px;">
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="background:#F5FAF7;border-radius:10px;">
<tr><td style="padding:18px 22px;">
<p style="margin:0 0 8px;font-size:1rem;font-weight:700;color:#1B2E24;">🎁 {{amount}} chez des centaines de marques</p>
<p style="margin:0 0 4px;font-size:0.92rem;color:#64748B;">⚡ Instantané à l'activation</p>
<p style="margin:0;font-size:0.92rem;color:#64748B;">🤝 Rester encore {{commitment_months}} mois ou +</p>
</td></tr>
</table>
</td></tr>
</table>
<!-- ════════ SECTION 4: Option 1 chip ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:18px 36px 8px;border-top:1px solid #eef0ee;">
<span style="display:inline-block;background:#E6F9EE;color:#00C853;font-size:0.82rem;font-weight:700;padding:5px 12px;border-radius:6px;">✅ Option 1</span>
</td></tr>
</table>
<!-- ════════ SECTION 5: Big green CTA button ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:8px 36px;">
<a href="{{gift_url}}" style="display:block;text-decoration:none;background:#00C853;background-image:linear-gradient(135deg,#00C853 0%,#005026 100%);border-radius:12px;padding:30px 24px;text-align:center;color:#ffffff;">
<span style="display:block;font-family:'Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:2.2rem;font-weight:700;line-height:1;color:#ffffff;">🎁&nbsp;&nbsp;{{amount}}</span>
<span style="display:block;margin-top:14px;font-size:1.08rem;font-weight:700;color:#ffffff;">Activer ma carte-cadeau</span>
<span style="display:block;margin-top:6px;font-size:0.85rem;color:#ffffff;opacity:0.9;">Choisir ma carte sur Giftbit →</span>
</a>
</td></tr>
</table>
<!-- ════════ SECTION 6: Prorata refund disclaimer ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:10px 36px 22px;">
<p style="margin:0;font-size:0.85rem;color:#6b7280;">
🪂 En cas de départ avant {{commitment_months}} mois, le prorata du montant est remboursable.
</p>
</td></tr>
</table>
<!-- ════════ SECTION 7: Option 2 chip + text ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:18px 36px 6px;border-top:1px solid #eef0ee;">
<span style="display:inline-block;background:#F5FAF7;color:#6b7280;font-size:0.82rem;font-weight:700;padding:5px 12px;border-radius:6px;">⏭️ Option 2</span>
</td></tr>
</table>
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:6px 36px 22px;">
<p style="margin:0;font-size:0.97rem;color:#4b5563;line-height:1.55;">
Ne rien faire. Ton abonnement mensuel se poursuit normalement, sans engagement ni carte-cadeau.
</p>
</td></tr>
</table>
{{#expiry}}
<!-- ════════ SECTION 8 (optional): Expiry notice ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:14px 36px 0;border-top:1px solid #eef0ee;">
<p style="margin:0;font-size:0.85rem;color:#9ca3af;">
⏰ Cette offre expire le <strong style="color:#374151;">{{expiry}}</strong>.
</p>
</td></tr>
</table>
{{/expiry}}
<!-- ════════ SECTION 9: Signature ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;border-radius:0 0 12px 12px;">
<tr><td style="padding:18px 36px 28px;border-top:1px solid #eef0ee;">
<p style="margin:0;font-size:0.97rem;color:#1B2E24;">🤝 Merci de faire rouler l'économie de notre région avec nous !</p>
<p style="margin:8px 0 0;font-size:0.9rem;color:#64748B;">L'équipe TARGO</p>
</td></tr>
</table>
<!-- ════════ SECTION 10: Contact info (outside card) ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;">
<tr><td style="padding:18px 36px 8px;text-align:center;">
<p style="margin:0;font-size:0.78rem;color:#64748B;line-height:1.55;">
Tu reçois ce courriel parce que tu es client(e) TARGO à
<strong style="color:#1B2E24;">{{description}}</strong>.<br>
Une question ? Écris à
<a href="mailto:support@targo.ca" style="color:#00C853;text-decoration:none;">support@targo.ca</a>
ou appelle au
<a href="tel:5144480773" style="color:#00C853;text-decoration:none;">514&nbsp;448-0773</a>.
Support&nbsp;7j/7.
</p>
</td></tr>
</table>
<!-- ════════ SECTION 11: Dark footer band ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#1C1E26;border-radius:12px;margin-top:12px;">
<tr><td style="padding:26px 36px 22px;text-align:center;">
<img src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content"
alt="TARGO" width="120" style="display:inline-block;border:0;outline:none;text-decoration:none;max-width:120px;height:auto;">
<p style="margin:18px 0 0;font-size:0.7rem;color:rgba(255,255,255,0.45);line-height:1.55;">
<a href="https://www.targo.ca" style="color:rgba(255,255,255,0.7);text-decoration:none;">www.targo.ca</a>
&nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br>
© {{year}} TARGO Communications · Tous droits réservés.
</p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>

1138
scripts/campaigns/templates/gift-email-fr.html
View File

File diff suppressed because it is too large Load Diff

0
scripts/campaigns/templates/gift-email-fr-mjml.mjml → scripts/campaigns/templates/gift-email-fr.mjml
View File

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

@ -652,14 +652,10 @@ const DEFAULT_TEMPLATE = path.join(TEMPLATES_DIR, 'gift-email-fr.html')
// gets used at send time. `-simple` variants are flat-structured copies
// designed to parse cleanly in GrapesJS visual editor (no nested tables).
// Adding a new lang or variant = drop a new .html here + add to this list.
const EDITABLE_TEMPLATES = [
'gift-email-fr',
'gift-email-en',
'gift-email-fr-simple',
'gift-email-en-simple',
// MJML variant — visual editor uses grapesjs-mjml plugin on this one
'gift-email-fr-mjml',
]
// Canonical templates — both now backed by .mjml source (compiled to .html
// on save for the send-worker). Legacy HTML-only variants were dropped
// after the MJML migration (see git history for rollback).
const EDITABLE_TEMPLATES = ['gift-email-fr', 'gift-email-en']
// Resolve the template path for a given recipient language. Falls back to
// the French version (most of the customer base) if the language-specific
@ -1093,6 +1089,60 @@ async function handle (req, res, method, path) {
}
}
// POST /campaigns/templates/:name/test-send — send ONE rendered email to a
// specific address for visual QA. Uses the campaign Mailjet sender +
// throttle. NOT linked to any campaign — purely for template testing.
// Body: { to: 'louis@targo.ca', vars: {...}, from?: 'TARGO <support@targointernet.com>' }
const tplTestSend = path.match(/^\/campaigns\/templates\/([a-zA-Z0-9_-]+)\/test-send$/)
if (tplTestSend && method === 'POST') {
const body = await parseBody(req)
const to = (body.to || '').trim()
if (!to || !to.includes('@')) {
return json(res, 400, { error: 'to (recipient email) required' })
}
const name = tplTestSend[1]
let html
try {
// Always read the COMPILED .html — what the recipient actually receives.
// MJML source is for the editor; the send-worker reads compiled HTML.
html = fs.readFileSync(templatePath(name), 'utf8')
} catch (e) {
return json(res, 404, { error: 'template not found', detail: e.message })
}
const vars = {
firstname: 'Louis',
lastname: 'Test',
email: to,
description: '123 Rue de Test, Ste-Clotilde',
gift_url: 'https://gft.link/TEST123',
amount: '60 $',
expiry: '31 décembre 2026',
commitment_months: '3',
year: new Date().getFullYear(),
...(body.vars || {}),
}
const rendered = renderTemplate(html, vars)
const fromAddr = body.from || cfg.MAIL_FROM || 'TARGO <support@targointernet.com>'
try {
const info = await email.sendEmail({
to,
from: fromAddr,
subject: body.subject || `[TEST] Template ${name}`,
html: rendered,
headers: { 'X-MJ-CustomID': `test-send:${name}:${Date.now()}` },
})
if (!info) return json(res, 500, { error: 'SMTP send returned false (see hub logs)' })
log(`test-send: ${name} → ${to} (${rendered.length} bytes)`)
return json(res, 200, {
sent: true, to, from: fromAddr,
message_id: info.messageId || null,
bytes: rendered.length,
})
} catch (e) {
return json(res, 500, { error: e.message })
}
}
// POST /campaigns/templates/:name/preview — render with sample data
// Useful for the editor's "Preview" pane to see what {{vars}} resolve to.
const tplPreview = path.match(/^\/campaigns\/templates\/([a-zA-Z0-9_-]+)\/preview$/)

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

@ -1,155 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>An exclusive offer from TARGO</title>
<!-- Brand fonts via Google Fonts. Outlook desktop skips this (MSO conditional)
and falls back to Helvetica/Arial through the font-family stack. -->
<!--[if !mso]><!-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
<!--<![endif]-->
</head>
<!-- ──────────────────────────────────────────────────────────────────────────
SIMPLE-STACK email template — each <section> is one independent table.
Designed to parse cleanly in GrapesJS-preset-newsletter so you can edit
visually in the ops UI editor. Max 1 level of table nesting per section.
Vertically-stacked tables share background colors to appear as one card.
────────────────────────────────────────────────────────────────────── -->
<body style="margin:0;padding:0;background:#F5FAF7;font-family:'Plus Jakarta Sans','Helvetica Neue',Helvetica,Arial,sans-serif;color:#1B2E24;line-height:1.5;">
<!-- Outer centering wrapper (not part of the editable content) -->
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="background:#F5FAF7;">
<tr><td align="center" style="padding:32px 16px;">
<!-- ════════ SECTION 1: Header logo ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border:1px solid #e5e7eb;border-bottom:none;border-radius:12px 12px 0 0;">
<tr><td style="padding:28px 36px 22px;border-bottom:1px solid #eef0ee;">
<img src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content"
alt="TARGO" width="140" style="display:block;border:0;outline:none;text-decoration:none;max-width:140px;height:auto;">
</td></tr>
</table>
<!-- ════════ SECTION 2: Greeting + brand line ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:26px 36px 18px;">
<p style="margin:0 0 14px;font-size:1rem;color:#374151;">Hi {{firstname}},</p>
<p style="margin:0 0 14px;font-size:1.08rem;color:#1B2E24;font-weight:500;">
Just like you, we love stable connections and lasting relationships.
</p>
<p style="margin:0;font-size:1rem;color:#374151;">
Summer's here, and so is your
<strong>limited-time exclusive offer</strong>:
</p>
</td></tr>
</table>
<!-- ════════ SECTION 3: Compact info block (3 pills → 1 card) ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:0 36px 22px;">
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="background:#F5FAF7;border-radius:10px;">
<tr><td style="padding:18px 22px;">
<p style="margin:0 0 8px;font-size:1rem;font-weight:700;color:#1B2E24;">🎁 {{amount}} at hundreds of brands</p>
<p style="margin:0 0 4px;font-size:0.92rem;color:#64748B;">⚡ Instant on activation</p>
<p style="margin:0;font-size:0.92rem;color:#64748B;">🤝 Stay with us {{commitment_months}}+ months</p>
</td></tr>
</table>
</td></tr>
</table>
<!-- ════════ SECTION 4: Option 1 chip ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:18px 36px 8px;border-top:1px solid #eef0ee;">
<span style="display:inline-block;background:#E6F9EE;color:#00C853;font-size:0.82rem;font-weight:700;padding:5px 12px;border-radius:6px;">✅ Option 1</span>
</td></tr>
</table>
<!-- ════════ SECTION 5: Big green CTA button ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:8px 36px;">
<a href="{{gift_url}}" style="display:block;text-decoration:none;background:#00C853;background-image:linear-gradient(135deg,#00C853 0%,#005026 100%);border-radius:12px;padding:30px 24px;text-align:center;color:#ffffff;">
<span style="display:block;font-family:'Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:2.2rem;font-weight:700;line-height:1;color:#ffffff;">🎁&nbsp;&nbsp;{{amount}}</span>
<span style="display:block;margin-top:14px;font-size:1.08rem;font-weight:700;color:#ffffff;">Redeem my gift card</span>
<span style="display:block;margin-top:6px;font-size:0.85rem;color:#ffffff;opacity:0.9;">Pick your brand on Giftbit →</span>
</a>
</td></tr>
</table>
<!-- ════════ SECTION 6: Prorata refund disclaimer ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:10px 36px 22px;">
<p style="margin:0;font-size:0.85rem;color:#6b7280;">
🪂 If you leave before {{commitment_months}} months, the prorated amount is refundable.
</p>
</td></tr>
</table>
<!-- ════════ SECTION 7: Option 2 chip + text ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:18px 36px 6px;border-top:1px solid #eef0ee;">
<span style="display:inline-block;background:#F5FAF7;color:#6b7280;font-size:0.82rem;font-weight:700;padding:5px 12px;border-radius:6px;">⏭️ Option 2</span>
</td></tr>
</table>
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:6px 36px 22px;">
<p style="margin:0;font-size:0.97rem;color:#4b5563;line-height:1.55;">
Do nothing. Your monthly subscription continues as usual — no commitment, no gift card.
</p>
</td></tr>
</table>
{{#expiry}}
<!-- ════════ SECTION 8 (optional): Expiry notice ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:14px 36px 0;border-top:1px solid #eef0ee;">
<p style="margin:0;font-size:0.85rem;color:#9ca3af;">
⏰ This offer expires on <strong style="color:#374151;">{{expiry}}</strong>.
</p>
</td></tr>
</table>
{{/expiry}}
<!-- ════════ SECTION 9: Signature ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;border-radius:0 0 12px 12px;">
<tr><td style="padding:18px 36px 28px;border-top:1px solid #eef0ee;">
<p style="margin:0;font-size:0.97rem;color:#1B2E24;">🤝 Thanks for helping our regional economy thrive!</p>
<p style="margin:8px 0 0;font-size:0.9rem;color:#64748B;">The TARGO team</p>
</td></tr>
</table>
<!-- ════════ SECTION 10: Contact info (outside card) ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;">
<tr><td style="padding:18px 36px 8px;text-align:center;">
<p style="margin:0;font-size:0.78rem;color:#64748B;line-height:1.55;">
You're getting this email because you're a TARGO customer at
<strong style="color:#1B2E24;">{{description}}</strong>.<br>
Got a question? Write to
<a href="mailto:support@targo.ca" style="color:#00C853;text-decoration:none;">support@targo.ca</a>
or call
<a href="tel:5144480773" style="color:#00C853;text-decoration:none;">514&nbsp;448-0773</a>.
Support&nbsp;7&nbsp;days/week.
</p>
</td></tr>
</table>
<!-- ════════ SECTION 11: Dark footer band ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#1C1E26;border-radius:12px;margin-top:12px;">
<tr><td style="padding:26px 36px 22px;text-align:center;">
<img src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content"
alt="TARGO" width="120" style="display:inline-block;border:0;outline:none;text-decoration:none;max-width:120px;height:auto;">
<p style="margin:18px 0 0;font-size:0.7rem;color:rgba(255,255,255,0.45);line-height:1.55;">
<a href="https://www.targo.ca" style="color:rgba(255,255,255,0.7);text-decoration:none;">www.targo.ca</a>
&nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br>
© {{year}} TARGO Communications · All rights reserved.
</p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>

1116
services/targo-hub/templates/gift-email-en.html
View File

File diff suppressed because it is too large Load Diff

132
services/targo-hub/templates/gift-email-en.mjml Normal file
View File

@ -0,0 +1,132 @@
<mjml>
<mj-head>
<mj-title>An exclusive offer from TARGO</mj-title>
<mj-preview>Just like you, we love stable connections and lasting relationships.</mj-preview>
<mj-font name="Plus Jakarta Sans" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" />
<mj-font name="Space Grotesk" href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap" />
<mj-attributes>
<mj-all font-family="Plus Jakarta Sans, Helvetica, Arial, sans-serif" />
<mj-body background-color="#F5FAF7" />
<mj-text color="#1B2E24" line-height="1.5" font-size="16px" />
<mj-button background-color="#00C853" color="#ffffff" font-weight="700" border-radius="12px" />
</mj-attributes>
</mj-head>
<mj-body background-color="#F5FAF7" width="600px">
<!-- ════════ HEADER LOGO ════════ -->
<mj-section background-color="#ffffff" border="1px solid #e5e7eb" border-bottom="none" border-radius="12px 12px 0 0" padding="28px 36px 22px">
<mj-column>
<mj-image src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content"
alt="TARGO" width="140px" align="left" padding="0" />
</mj-column>
</mj-section>
<!-- ════════ GREETING + BRAND LINE ════════ -->
<mj-section background-color="#ffffff" border-left="1px solid #e5e7eb" border-right="1px solid #e5e7eb" border-top="1px solid #eef0ee" padding="26px 36px 0">
<mj-column>
<mj-text color="#374151" font-size="16px" padding-bottom="14px">Hi {{firstname}},</mj-text>
<mj-text font-size="17px" font-weight="500" color="#1B2E24" padding-bottom="14px">
Just like you, we love stable connections and lasting relationships.
</mj-text>
<mj-text color="#374151" padding-bottom="0">
Summer's here, and so is your <strong>limited-time exclusive offer</strong>:
</mj-text>
</mj-column>
</mj-section>
<!-- ════════ COMPACT INFO CARD ════════ -->
<mj-section background-color="#ffffff" border-left="1px solid #e5e7eb" border-right="1px solid #e5e7eb" padding="18px 36px 22px">
<mj-column background-color="#F5FAF7" border-radius="10px" padding="18px 22px">
<mj-text font-weight="700" color="#1B2E24" padding="0 0 8px">🎁 {{amount}} at hundreds of brands</mj-text>
<mj-text color="#64748B" font-size="14px" padding="0 0 4px">⚡ Instant on activation</mj-text>
<mj-text color="#64748B" font-size="14px" padding="0">🤝 Stay with us {{commitment_months}}+ months</mj-text>
</mj-column>
</mj-section>
<!-- ════════ OPTION 1 CHIP ════════ -->
<mj-section background-color="#ffffff" border-left="1px solid #e5e7eb" border-right="1px solid #e5e7eb" border-top="1px solid #eef0ee" padding="18px 36px 8px">
<mj-column>
<mj-text padding="0">
<span style="display:inline-block;background:#E6F9EE;color:#00C853;font-size:13px;font-weight:700;padding:5px 12px;border-radius:6px;">✅ Option 1</span>
</mj-text>
</mj-column>
</mj-section>
<!-- ════════ BIG GREEN CTA BUTTON ════════ -->
<mj-section background-color="#ffffff" border-left="1px solid #e5e7eb" border-right="1px solid #e5e7eb" padding="8px 36px">
<mj-column>
<mj-button href="{{gift_url}}"
background-color="#00C853" color="#ffffff"
inner-padding="30px 24px" border-radius="12px"
font-size="32px" font-weight="700"
font-family="Space Grotesk, Helvetica, Arial, sans-serif"
width="100%">
🎁&nbsp;&nbsp;{{amount}}
</mj-button>
</mj-column>
</mj-section>
<!-- ════════ PRORATA REFUND DISCLAIMER ════════ -->
<mj-section background-color="#ffffff" border-left="1px solid #e5e7eb" border-right="1px solid #e5e7eb" padding="10px 36px 22px">
<mj-column>
<mj-text color="#6b7280" font-size="14px" padding="0">
🪂 If you leave before {{commitment_months}} months, the prorated amount is refundable.
</mj-text>
</mj-column>
</mj-section>
<!-- ════════ OPTION 2 CHIP + TEXT ════════ -->
<mj-section background-color="#ffffff" border-left="1px solid #e5e7eb" border-right="1px solid #e5e7eb" border-top="1px solid #eef0ee" padding="18px 36px 6px">
<mj-column>
<mj-text padding="0">
<span style="display:inline-block;background:#F5FAF7;color:#6b7280;font-size:13px;font-weight:700;padding:5px 12px;border-radius:6px;">⏭️ Option 2</span>
</mj-text>
</mj-column>
</mj-section>
<mj-section background-color="#ffffff" border-left="1px solid #e5e7eb" border-right="1px solid #e5e7eb" padding="6px 36px 22px">
<mj-column>
<mj-text color="#4b5563" font-size="15px" line-height="1.55" padding="0">
Do nothing. Your monthly subscription continues as usual — no commitment, no gift card.
</mj-text>
</mj-column>
</mj-section>
<!-- ════════ SIGNATURE ════════ -->
<mj-section background-color="#ffffff" border-left="1px solid #e5e7eb" border-right="1px solid #e5e7eb" border-bottom="1px solid #e5e7eb" border-top="1px solid #eef0ee" border-radius="0 0 12px 12px" padding="18px 36px 28px">
<mj-column>
<mj-text color="#1B2E24" font-size="15px" padding="0">🤝 Thanks for helping our regional economy thrive!</mj-text>
<mj-text color="#64748B" font-size="14px" padding="8px 0 0">The TARGO team</mj-text>
</mj-column>
</mj-section>
<!-- ════════ CONTACT INFO ════════ -->
<mj-section padding="18px 36px 8px">
<mj-column>
<mj-text align="center" color="#64748B" font-size="12px" line-height="1.55" padding="0">
You're getting this email because you're a TARGO customer at <strong style="color:#1B2E24;">{{description}}</strong>.<br />
Got a question? Write to
<a href="mailto:support@targo.ca" style="color:#00C853;text-decoration:none;">support@targo.ca</a>
or call
<a href="tel:5144480773" style="color:#00C853;text-decoration:none;">514&nbsp;448-0773</a>.
Support&nbsp;7&nbsp;days/week.
</mj-text>
</mj-column>
</mj-section>
<!-- ════════ DARK FOOTER BAND ════════ -->
<mj-section background-color="#1C1E26" border-radius="12px" padding="26px 36px 22px">
<mj-column>
<mj-image src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content"
alt="TARGO" width="120px" align="center" padding="0" />
<mj-text align="center" color="rgba(255,255,255,0.55)" font-size="11px" line-height="1.55" padding="18px 0 0">
<a href="https://www.targo.ca" style="color:rgba(255,255,255,0.7);text-decoration:none;">www.targo.ca</a>
&nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br />
© {{year}} TARGO Communications · All rights reserved.
</mj-text>
</mj-column>
</mj-section>
</mj-body>
</mjml>

814
services/targo-hub/templates/gift-email-fr-mjml.html
View File

@ -1,814 +0,0 @@
<!doctype html>
<html lang="und" dir="auto" xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<title>Une offre exclusive de TARGO</title>
<!--[if !mso]><!-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--<![endif]-->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
#outlook a { padding:0; }
body { margin:0;padding:0;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; }
table, td { border-collapse:collapse;mso-table-lspace:0pt;mso-table-rspace:0pt; }
img { border:0;height:auto;line-height:100%; outline:none;text-decoration:none;-ms-interpolation-mode:bicubic; }
p { display:block;margin:13px 0; }
</style>
<!--[if mso]>
<noscript>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
</noscript>
<![endif]-->
<!--[if lte mso 11]>
<style type="text/css">
.mj-outlook-group-fix { width:100% !important; }
</style>
<![endif]-->
<!--[if !mso]><!-->
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet" type="text/css">
<style type="text/css">
@import url(https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&display=swap);
</style>
<!--<![endif]-->
<style type="text/css">
@media only screen and (min-width:480px) {
.mj-column-per-100 { width:100% !important; max-width: 100%; }
}
</style>
<style media="screen and (min-width:480px)">
.moz-text-html .mj-column-per-100 { width:100% !important; max-width: 100%; }
</style>
<style type="text/css">
@media only screen and (max-width:479px) {
table.mj-full-width-mobile { width: 100% !important; }
td.mj-full-width-mobile { width: auto !important; }
}
</style>
</head>
<body style="word-spacing:normal;background-color:#F5FAF7;">
<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0px;max-width:0px;opacity:0;overflow:hidden;">Comme toi, on aime les connexions stables et les relations durables.</div>
<div
aria-label="Une offre exclusive de TARGO" aria-roledescription="email" role="article" lang="und" dir="auto" style="word-spacing:normal;background-color:#F5FAF7;"
>
<!-- ════════ HEADER LOGO ════════ -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;border-radius:12px 12px 0 0;overflow:hidden;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;border-collapse:separate;"
>
<tbody>
<tr>
<td
style="border:1px solid #e5e7eb;border-bottom:none;border-radius:12px 12px 0 0;direction:ltr;font-size:0px;padding:28px 36px 22px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:526px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="left" style="font-size:0px;padding:0;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"
>
<tbody>
<tr>
<td style="width:140px;">
<img
alt="TARGO" src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="140" height="auto"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- ════════ GREETING + BRAND LINE ════════ -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
>
<tbody>
<tr>
<td
style="border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;border-top:1px solid #eef0ee;direction:ltr;font-size:0px;padding:26px 36px 0;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:526px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="left" style="font-size:0px;padding:10px 25px;padding-bottom:14px;word-break:break-word;"
>
<div
style="font-family:Plus Jakarta Sans, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.5;text-align:left;color:#374151;"
>Bonjour {{firstname}},</div>
</td>
</tr>
<tr>
<td
align="left" style="font-size:0px;padding:10px 25px;padding-bottom:14px;word-break:break-word;"
>
<div
style="font-family:Plus Jakarta Sans, Helvetica, Arial, sans-serif;font-size:17px;font-weight:500;line-height:1.5;text-align:left;color:#1B2E24;"
>Comme toi, on aime les connexions stables et les relations durables.</div>
</td>
</tr>
<tr>
<td
align="left" style="font-size:0px;padding:10px 25px;padding-bottom:0;word-break:break-word;"
>
<div
style="font-family:Plus Jakarta Sans, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.5;text-align:left;color:#374151;"
>Avec l'arrivée de l'été, voici ton <strong>offre exclusive pour un temps limité</strong> :</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- ════════ COMPACT INFO CARD (was 3 pills) ════════ -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
>
<tbody>
<tr>
<td
style="border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;direction:ltr;font-size:0px;padding:18px 36px 22px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:526px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" width="100%" style="border-collapse:separate;"
>
<tbody>
<tr>
<td style="background-color:#F5FAF7;border-radius:10px;vertical-align:top;border-collapse:separate;padding:18px 22px;">
<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</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;"
>⚡ Instantané à l'activation</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;"
>🤝 Rester encore {{commitment_months}} mois ou +</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- ════════ OPTION 1 CHIP ════════ -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
>
<tbody>
<tr>
<td
style="border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;border-top:1px solid #eef0ee;direction:ltr;font-size:0px;padding:18px 36px 8px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:526px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<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: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>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- ════════ BIG GREEN CTA BUTTON ════════ -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
>
<tbody>
<tr>
<td
style="border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;direction:ltr;font-size:0px;padding:8px 36px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:526px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:10px 25px;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:separate;width:100%;line-height:100%;"
>
<tbody>
<tr>
<td
align="center" bgcolor="#00C853" role="presentation" style="border:none;border-radius:12px;cursor:auto;mso-padding-alt:30px 24px;background:#00C853;" valign="middle"
>
<a
href="{{gift_url}}" 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%;margin:0;text-decoration:none;text-transform:none;padding:30px 24px;mso-padding-alt:0px;border-radius:12px;" target="_blank"
>
🎁&nbsp;&nbsp;{{amount}}
</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
align="center" class="cta-subtitle" style="font-size:0px;padding:0;word-break:break-word;"
>
<div
style="font-family:Plus Jakarta Sans, Helvetica, Arial, sans-serif;font-size:16px;line-height:1.5;text-align:center;color:#ffffff;"
><!-- Sub-labels inside the button: not directly supported in mjml-button,
so we render them as a styled text block immediately below.
In the actual rendered output they appear visually under the
button text. --></div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- ════════ PRORATA REFUND DISCLAIMER ════════ -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
>
<tbody>
<tr>
<td
style="border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;direction:ltr;font-size:0px;padding:10px 36px 22px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:526px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<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:#6b7280;"
>🪂 En cas de départ avant {{commitment_months}} mois, le prorata du montant est remboursable.</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- ════════ OPTION 2 CHIP + TEXT ════════ -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
>
<tbody>
<tr>
<td
style="border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;border-top:1px solid #eef0ee;direction:ltr;font-size:0px;padding:18px 36px 6px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:526px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<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: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>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;"
>
<tbody>
<tr>
<td
style="border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;direction:ltr;font-size:0px;padding:6px 36px 22px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:526px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<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:15px;line-height:1.55;text-align:left;color:#4b5563;"
>Ne rien faire. Ton abonnement mensuel se poursuit normalement, sans engagement ni carte-cadeau.</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- ════════ SIGNATURE ════════ -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#ffffff" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#ffffff;background-color:#ffffff;margin:0px auto;max-width:600px;border-radius:0 0 12px 12px;overflow:hidden;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#ffffff;background-color:#ffffff;width:100%;border-collapse:separate;"
>
<tbody>
<tr>
<td
style="border-bottom:1px solid #e5e7eb;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;border-top:1px solid #eef0ee;border-radius:0 0 12px 12px;direction:ltr;font-size:0px;padding:18px 36px 28px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:526px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<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:15px;line-height:1.5;text-align:left;color:#1B2E24;"
>🤝 Merci de faire rouler l'économie de notre région avec nous !</div>
</td>
</tr>
<tr>
<td
align="left" style="font-size:0px;padding:8px 0 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;"
>L'équipe TARGO</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- ════════ CONTACT INFO (outside card) ════════ -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="margin:0px auto;max-width:600px;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="width:100%;"
>
<tbody>
<tr>
<td
style="direction:ltr;font-size:0px;padding:18px 36px 8px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:528px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:0;word-break:break-word;"
>
<div
style="font-family:Plus Jakarta Sans, Helvetica, Arial, sans-serif;font-size:12px;line-height:1.55;text-align:center;color:#64748B;"
>Tu reçois ce courriel parce que tu es client(e) TARGO à <strong style="color:#1B2E24;">{{description}}</strong>.<br />
Une question ? Écris à
<a href="mailto:support@targo.ca" style="color:#00C853;text-decoration:none;">support@targo.ca</a>
ou appelle au
<a href="tel:5144480773" style="color:#00C853;text-decoration:none;">514&nbsp;448-0773</a>.
Support&nbsp;7j/7.</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
<!-- ════════ DARK FOOTER BAND ════════ -->
<!--[if mso | IE]><table align="center" border="0" cellpadding="0" cellspacing="0" class="" role="presentation" style="width:600px;" width="600" bgcolor="#1C1E26" ><tr><td style="line-height:0px;font-size:0px;mso-line-height-rule:exactly;"><![endif]-->
<div style="background:#1C1E26;background-color:#1C1E26;margin:0px auto;max-width:600px;border-radius:12px;overflow:hidden;">
<table
align="center" border="0" cellpadding="0" cellspacing="0" role="presentation" style="background:#1C1E26;background-color:#1C1E26;width:100%;border-collapse:separate;"
>
<tbody>
<tr>
<td
style="border-radius:12px;direction:ltr;font-size:0px;padding:26px 36px 22px;text-align:center;"
>
<!--[if mso | IE]><table role="presentation" border="0" cellpadding="0" cellspacing="0"><tr><td class="" style="vertical-align:top;width:528px;" ><![endif]-->
<div
class="mj-column-per-100 mj-outlook-group-fix" style="font-size:0px;text-align:left;direction:ltr;display:inline-block;vertical-align:top;width:100%;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="vertical-align:top;" width="100%"
>
<tbody>
<tr>
<td
align="center" style="font-size:0px;padding:0;word-break:break-word;"
>
<table
border="0" cellpadding="0" cellspacing="0" role="presentation" style="border-collapse:collapse;border-spacing:0px;"
>
<tbody>
<tr>
<td style="width:120px;">
<img
alt="TARGO" src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content" style="border:0;display:block;outline:none;text-decoration:none;height:auto;width:100%;font-size:13px;" width="120" height="auto"
/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td
align="center" style="font-size:0px;padding:18px 0 0;word-break:break-word;"
>
<div
style="font-family:Plus Jakarta Sans, Helvetica, Arial, sans-serif;font-size:11px;line-height:1.55;text-align:center;color:rgba(255,255,255,0.55);"
><a href="https://www.targo.ca" style="color:rgba(255,255,255,0.7);text-decoration:none;">www.targo.ca</a>
&nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br />
© {{year}} TARGO Communications · Tous droits réservés.</div>
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</td>
</tr>
</tbody>
</table>
</div>
<!--[if mso | IE]></td></tr></table><![endif]-->
</div>
</body>
</html>

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

@ -1,155 +0,0 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Une offre exclusive de TARGO</title>
<!-- Brand fonts via Google Fonts. Outlook desktop skips this (MSO conditional)
and falls back to Helvetica/Arial through the font-family stack. -->
<!--[if !mso]><!-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
<!--<![endif]-->
</head>
<!-- ──────────────────────────────────────────────────────────────────────────
SIMPLE-STACK email template — each <section> is one independent table.
Designed to parse cleanly in GrapesJS-preset-newsletter so you can edit
visually in the ops UI editor. Max 1 level of table nesting per section.
Vertically-stacked tables share background colors to appear as one card.
────────────────────────────────────────────────────────────────────── -->
<body style="margin:0;padding:0;background:#F5FAF7;font-family:'Plus Jakarta Sans','Helvetica Neue',Helvetica,Arial,sans-serif;color:#1B2E24;line-height:1.5;">
<!-- Outer centering wrapper (not part of the editable content) -->
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="background:#F5FAF7;">
<tr><td align="center" style="padding:32px 16px;">
<!-- ════════ SECTION 1: Header logo ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border:1px solid #e5e7eb;border-bottom:none;border-radius:12px 12px 0 0;">
<tr><td style="padding:28px 36px 22px;border-bottom:1px solid #eef0ee;">
<img src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content"
alt="TARGO" width="140" style="display:block;border:0;outline:none;text-decoration:none;max-width:140px;height:auto;">
</td></tr>
</table>
<!-- ════════ SECTION 2: Greeting + brand line ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:26px 36px 18px;">
<p style="margin:0 0 14px;font-size:1rem;color:#374151;">Bonjour {{firstname}},</p>
<p style="margin:0 0 14px;font-size:1.08rem;color:#1B2E24;font-weight:500;">
Comme toi, on aime les connexions stables et les relations durables.
</p>
<p style="margin:0;font-size:1rem;color:#374151;">
Avec l'arrivée de l'été, voici ton
<strong>offre exclusive pour un temps limité</strong> :
</p>
</td></tr>
</table>
<!-- ════════ SECTION 3: Compact info block (3 pills → 1 card) ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:0 36px 22px;">
<table role="presentation" width="100%" border="0" cellpadding="0" cellspacing="0" style="background:#F5FAF7;border-radius:10px;">
<tr><td style="padding:18px 22px;">
<p style="margin:0 0 8px;font-size:1rem;font-weight:700;color:#1B2E24;">🎁 {{amount}} chez des centaines de marques</p>
<p style="margin:0 0 4px;font-size:0.92rem;color:#64748B;">⚡ Instantané à l'activation</p>
<p style="margin:0;font-size:0.92rem;color:#64748B;">🤝 Rester encore {{commitment_months}} mois ou +</p>
</td></tr>
</table>
</td></tr>
</table>
<!-- ════════ SECTION 4: Option 1 chip ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:18px 36px 8px;border-top:1px solid #eef0ee;">
<span style="display:inline-block;background:#E6F9EE;color:#00C853;font-size:0.82rem;font-weight:700;padding:5px 12px;border-radius:6px;">✅ Option 1</span>
</td></tr>
</table>
<!-- ════════ SECTION 5: Big green CTA button ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:8px 36px;">
<a href="{{gift_url}}" style="display:block;text-decoration:none;background:#00C853;background-image:linear-gradient(135deg,#00C853 0%,#005026 100%);border-radius:12px;padding:30px 24px;text-align:center;color:#ffffff;">
<span style="display:block;font-family:'Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:2.2rem;font-weight:700;line-height:1;color:#ffffff;">🎁&nbsp;&nbsp;{{amount}}</span>
<span style="display:block;margin-top:14px;font-size:1.08rem;font-weight:700;color:#ffffff;">Activer ma carte-cadeau</span>
<span style="display:block;margin-top:6px;font-size:0.85rem;color:#ffffff;opacity:0.9;">Choisir ma carte sur Giftbit →</span>
</a>
</td></tr>
</table>
<!-- ════════ SECTION 6: Prorata refund disclaimer ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:10px 36px 22px;">
<p style="margin:0;font-size:0.85rem;color:#6b7280;">
🪂 En cas de départ avant {{commitment_months}} mois, le prorata du montant est remboursable.
</p>
</td></tr>
</table>
<!-- ════════ SECTION 7: Option 2 chip + text ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:18px 36px 6px;border-top:1px solid #eef0ee;">
<span style="display:inline-block;background:#F5FAF7;color:#6b7280;font-size:0.82rem;font-weight:700;padding:5px 12px;border-radius:6px;">⏭️ Option 2</span>
</td></tr>
</table>
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:6px 36px 22px;">
<p style="margin:0;font-size:0.97rem;color:#4b5563;line-height:1.55;">
Ne rien faire. Ton abonnement mensuel se poursuit normalement, sans engagement ni carte-cadeau.
</p>
</td></tr>
</table>
{{#expiry}}
<!-- ════════ SECTION 8 (optional): Expiry notice ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;">
<tr><td style="padding:14px 36px 0;border-top:1px solid #eef0ee;">
<p style="margin:0;font-size:0.85rem;color:#9ca3af;">
⏰ Cette offre expire le <strong style="color:#374151;">{{expiry}}</strong>.
</p>
</td></tr>
</table>
{{/expiry}}
<!-- ════════ SECTION 9: Signature ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#ffffff;border-left:1px solid #e5e7eb;border-right:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;border-radius:0 0 12px 12px;">
<tr><td style="padding:18px 36px 28px;border-top:1px solid #eef0ee;">
<p style="margin:0;font-size:0.97rem;color:#1B2E24;">🤝 Merci de faire rouler l'économie de notre région avec nous !</p>
<p style="margin:8px 0 0;font-size:0.9rem;color:#64748B;">L'équipe TARGO</p>
</td></tr>
</table>
<!-- ════════ SECTION 10: Contact info (outside card) ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;">
<tr><td style="padding:18px 36px 8px;text-align:center;">
<p style="margin:0;font-size:0.78rem;color:#64748B;line-height:1.55;">
Tu reçois ce courriel parce que tu es client(e) TARGO à
<strong style="color:#1B2E24;">{{description}}</strong>.<br>
Une question ? Écris à
<a href="mailto:support@targo.ca" style="color:#00C853;text-decoration:none;">support@targo.ca</a>
ou appelle au
<a href="tel:5144480773" style="color:#00C853;text-decoration:none;">514&nbsp;448-0773</a>.
Support&nbsp;7j/7.
</p>
</td></tr>
</table>
<!-- ════════ SECTION 11: Dark footer band ════════ -->
<table role="presentation" width="600" border="0" cellpadding="0" cellspacing="0" align="center" style="max-width:600px;background:#1C1E26;border-radius:12px;margin-top:12px;">
<tr><td style="padding:26px 36px 22px;text-align:center;">
<img src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content"
alt="TARGO" width="120" style="display:inline-block;border:0;outline:none;text-decoration:none;max-width:120px;height:auto;">
<p style="margin:18px 0 0;font-size:0.7rem;color:rgba(255,255,255,0.45);line-height:1.55;">
<a href="https://www.targo.ca" style="color:rgba(255,255,255,0.7);text-decoration:none;">www.targo.ca</a>
&nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br>
© {{year}} TARGO Communications · Tous droits réservés.
</p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html>

1138
services/targo-hub/templates/gift-email-fr.html
View File

File diff suppressed because it is too large Load Diff

362
services/targo-hub/templates/gift-email-fr.legacy-rich.html.bak Normal file
View File

@ -0,0 +1,362 @@
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Une offre exclusive de TARGO</title>
<!-- Brand fonts: Space Grotesk for display, Plus Jakarta Sans for body.
Wrapped in MSO conditional comment so Outlook desktop skips the
Google Fonts request (it can't render them anyway) and falls back
to Helvetica via the font-family stack on each element. -->
<!--[if !mso]><!-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@500;600;700&display=swap" rel="stylesheet">
<!--<![endif]-->
</head>
<body style="margin:0; padding:0; background:#F5FAF7; font-family:'Plus Jakarta Sans','Helvetica Neue',Helvetica,Arial,sans-serif; color:#1B2E24; line-height:1.5;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td align="center" style="padding:32px 16px;">
<!-- Main card -->
<table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0"
style="max-width:600px; background:#ffffff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden;">
<!-- Logo header (clean, no colored band) -->
<tr>
<td style="padding:28px 36px 22px; border-bottom:1px solid #eef0ee;">
<img src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content"
alt="TARGO" width="140"
style="display:block; border:0; outline:none; text-decoration:none; max-width:140px; height:auto;">
</td>
</tr>
<!-- Greeting + hook -->
<tr>
<td style="padding:26px 36px 4px;">
<p style="margin:0 0 14px; font-size:1rem; color:#374151;">Bonjour {{firstname}},</p>
<p style="margin:0 0 10px; font-size:1.08rem; color:#1B2E24; font-weight:500;">
Comme toi, on aime les connexions stables et les relations durables.
</p>
<p style="margin:0; font-size:1rem; color:#374151;">
Avec l'arrivée de l'été, voici ton
<strong>offre exclusive pour un temps limité</strong> :
</p>
</td>
</tr>
<!-- Info pill: gift card amount -->
<tr>
<td style="padding:18px 36px 8px;">
<div style="background:#F5FAF7; border-radius:10px; padding:14px 18px;">
<div style="font-size:0.7rem; font-weight:700; letter-spacing:0.12em; color:#9ca3af; text-transform:uppercase; margin-bottom:4px;">
Carte-cadeau numérique
</div>
<div style="font-size:1.05rem; font-weight:700; color:#1B2E24;">
🎁 {{amount}} chez des centaines de marques
</div>
</div>
</td>
</tr>
<!-- Two-column: ENVOI + CONDITION -->
<tr>
<td style="padding:6px 36px 18px;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
<tr>
<td width="50%" style="padding-right:5px; vertical-align:top;">
<div style="background:#F5FAF7; border-radius:10px; padding:14px 16px;">
<div style="font-size:0.7rem; font-weight:700; letter-spacing:0.12em; color:#9ca3af; text-transform:uppercase; margin-bottom:4px;">
Envoi
</div>
<div style="font-size:0.95rem; font-weight:700; color:#1B2E24;">
⚡ Instantané à l'activation
</div>
</div>
</td>
<td width="50%" style="padding-left:5px; vertical-align:top;">
<div style="background:#F5FAF7; border-radius:10px; padding:14px 16px;">
<div style="font-size:0.7rem; font-weight:700; letter-spacing:0.12em; color:#9ca3af; text-transform:uppercase; margin-bottom:4px;">
Condition
</div>
<div style="font-size:0.95rem; font-weight:700; color:#1B2E24;">
🤝 Rester encore {{commitment_months}} mois ou +
</div>
</div>
</td>
</tr>
</table>
</td>
</tr>
<!-- Divider -->
<tr><td style="padding:0 36px;"><div style="border-top:1px solid #eef0ee;"></div></td></tr>
<!-- Option 1 chip -->
<tr>
<td style="padding:22px 36px 10px;">
<span style="display:inline-block; background:#E6F9EE; color:#00C853; font-size:0.82rem; font-weight:700; padding:5px 12px; border-radius:6px;">
✅ Option 1
</span>
</td>
</tr>
<!-- Big green CTA card -->
<tr>
<td style="padding:0 36px 8px;">
<a href="{{gift_url}}" style="text-decoration:none; color:#ffffff; display:block;">
<!-- CTA card — gradient Targo officiel (135deg, #00C853 → #005026).
Outlook desktop will ignore the gradient and render the
solid #00C853 fallback (the gradient is the bgcolor's
fallback in nodemailer rendering). Acceptable degradation. -->
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0"
bgcolor="#00C853"
style="background:#00C853; background-image:linear-gradient(135deg,#00C853 0%,#005026 100%); border-radius:12px;">
<tr>
<td style="padding:30px 24px; text-align:center;">
<div style="font-family:'Space Grotesk','Helvetica Neue',Helvetica,Arial,sans-serif; font-size:2.2rem; font-weight:700; line-height:1; margin-bottom:14px; color:#ffffff;">
🎁&nbsp;&nbsp;{{amount}}
</div>
<div style="font-size:1.08rem; font-weight:700; color:#ffffff;">
Activer ma carte-cadeau
</div>
<div style="font-size:0.85rem; opacity:0.9; margin-top:8px; color:#ffffff;">
Choisir ma carte sur Giftbit →
</div>
</td>
</tr>
</table>
</a>
</td>
</tr>
<!-- Prorata refund disclaimer -->
<tr>
<td style="padding:10px 36px 22px;">
<div style="font-size:0.85rem; color:#6b7280;">
🪂 En cas de départ avant {{commitment_months}} mois, le prorata du montant est remboursable.
</div>
</td>
</tr>
<!-- Divider -->
<tr><td style="padding:0 36px;"><div style="border-top:1px solid #eef0ee;"></div></td></tr>
<!-- Option 2 chip -->
<tr>
<td style="padding:22px 36px 8px;">
<span style="display:inline-block; background:#F5FAF7; color:#6b7280; font-size:0.82rem; font-weight:700; padding:5px 12px; border-radius:6px;">
⏭️ Option 2
</span>
</td>
</tr>
<tr>
<td style="padding:0 36px 22px;">
<div style="font-size:0.97rem; color:#4b5563; line-height:1.55;">
Ne rien faire. Ton abonnement mensuel se poursuit normalement,
sans engagement ni carte-cadeau.
</div>
</td>
</tr>
{{#expiry}}
<!-- Optional expiry callout -->
<tr><td style="padding:0 36px;"><div style="border-top:1px solid #eef0ee;"></div></td></tr>
<tr>
<td style="padding:18px 36px 0;">
<div style="font-size:0.85rem; color:#9ca3af;">
⏰ Cette offre expire le <strong style="color:#374151;">{{expiry}}</strong>.
</div>
</td>
</tr>
{{/expiry}}
<!-- Divider -->
<tr><td style="padding:18px 36px 0;"><div style="border-top:1px solid #eef0ee;"></div></td></tr>
<!-- Signature -->
<tr>
<td style="padding:22px 36px 28px;">
<div style="font-size:0.97rem; color:#1B2E24;">
🤝 Merci de faire rouler l'économie de notre région avec nous !
</div>
<div style="font-size:0.9rem; color:#6b7280; margin-top:6px;">
L'équipe TARGO
</div>
</td>
</tr>
</table>
<!-- Merchant brands grid — 4 cols × 3 rows = 12 logos
TO SWAP TO MAILJET-HOSTED LOGOS:
Replace each placeholder src URL below with the Mailjet CDN URL
you already have (same format as the TARGO logo:
https://xqy3m.mjt.lu/img2/xqy3m/<UUID>/content). The alt= attribute
stays as-is (used by screen readers + shown when images blocked).
Brand list in order: Amazon, IGA, Tim Hortons, $1 Plus (Dollarama),
Pizza Pizza, Home Depot, Best Buy, Walmart,
Petro-Canada, Esso, Home Hardware, Sobeys.
-->
<table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0"
style="max-width:600px; margin-top:8px;">
<tr>
<td style="padding:24px 36px 12px; text-align:center;">
<div style="font-size:1.02rem; font-weight:700; color:#00C853;">
Quelques exemples de choix pour votre carte cadeau :
</div>
</td>
</tr>
<tr>
<td style="padding:0 28px 8px;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0">
<!-- Row 1 — real Mailjet-hosted logos -->
<tr>
<td width="25%" style="padding:4px;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
<tr><td align="center" valign="middle" height="92" style="height:92px;">
<img src="https://xqy3m.mjt.lu/img2/xqy3m/31ffdf91-d2de-4ced-8b99-ad2221695abe/content" alt="Amazon" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
</td></tr>
</table>
</td>
<td width="25%" style="padding:4px;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
<tr><td align="center" valign="middle" height="92" style="height:92px;">
<img src="https://xqy3m.mjt.lu/img2/xqy3m/9c9dfa18-2a3a-414a-b5ad-16d490c961b5/content" alt="IGA" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
</td></tr>
</table>
</td>
<td width="25%" style="padding:4px;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
<tr><td align="center" valign="middle" height="92" style="height:92px;">
<img src="https://xqy3m.mjt.lu/img2/xqy3m/4b0b2a4a-5f99-416c-8873-8d3e4389b6f7/content" alt="Tim Hortons" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
</td></tr>
</table>
</td>
<td width="25%" style="padding:4px;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
<tr><td align="center" valign="middle" height="92" style="height:92px;">
<img src="https://xqy3m.mjt.lu/img2/xqy3m/162b988c-beb7-49b3-b85e-ccc12fa2c155/content" alt="$1 Plus" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
</td></tr>
</table>
</td>
</tr>
<!-- Row 2 — Mailjet-hosted brand logos (sourced from user's Passport template) -->
<tr>
<td width="25%" style="padding:4px;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
<tr><td align="center" valign="middle" height="92" style="height:92px;">
<img src="https://xqy3m.mjt.lu/img2/xqy3m/ef3b15eb-ec08-4551-ae27-ce249688185a/content" alt="Pizza Pizza" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
</td></tr>
</table>
</td>
<td width="25%" style="padding:4px;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
<tr><td align="center" valign="middle" height="92" style="height:92px;">
<img src="https://xqy3m.mjt.lu/img2/xqy3m/b8d3db5a-d39e-43ce-a84a-2f5dddbf0192/content" alt="Home Depot" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
</td></tr>
</table>
</td>
<td width="25%" style="padding:4px;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
<tr><td align="center" valign="middle" height="92" style="height:92px;">
<img src="https://xqy3m.mjt.lu/img2/xqy3m/cb965d5a-3e92-4f16-9e5c-b4939ce3cb91/content" alt="Best Buy" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
</td></tr>
</table>
</td>
<td width="25%" style="padding:4px;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
<tr><td align="center" valign="middle" height="92" style="height:92px;">
<img src="https://xqy3m.mjt.lu/img2/xqy3m/14df433d-583c-4602-a403-d47ee84966a6/content" alt="Walmart" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
</td></tr>
</table>
</td>
</tr>
<!-- Row 3 — Mailjet-hosted brand logos -->
<tr>
<td width="25%" style="padding:4px;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
<tr><td align="center" valign="middle" height="92" style="height:92px;">
<img src="https://xqy3m.mjt.lu/img2/xqy3m/36775a32-434a-41e1-bb7a-ec7b768e5ba0/content" alt="Petro-Canada" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
</td></tr>
</table>
</td>
<td width="25%" style="padding:4px;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
<tr><td align="center" valign="middle" height="92" style="height:92px;">
<img src="https://xqy3m.mjt.lu/img2/xqy3m/ff95b593-8ba3-4e57-9f01-f46cf0a2b33f/content" alt="Esso" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
</td></tr>
</table>
</td>
<td width="25%" style="padding:4px;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
<tr><td align="center" valign="middle" height="92" style="height:92px;">
<img src="https://xqy3m.mjt.lu/img2/xqy3m/a1e5f032-a192-4499-97ba-53b939712fa9/content" alt="Home Hardware" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
</td></tr>
</table>
</td>
<td width="25%" style="padding:4px;">
<table role="presentation" width="100%" cellspacing="0" cellpadding="0" border="0" style="background:#ffffff; border-radius:8px;">
<tr><td align="center" valign="middle" height="92" style="height:92px;">
<img src="https://xqy3m.mjt.lu/img2/xqy3m/67bd791a-18c7-4d65-a77a-64c86cecc2b1/content" alt="Sobeys" width="95" style="max-width:95px; height:auto; display:inline-block; border:0;">
</td></tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- "Pourquoi cet email" + coordonnées officielles (per brand guide §11) -->
<table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0"
style="max-width:600px;">
<tr>
<td style="padding:18px 36px 8px; text-align:center;">
<div style="font-size:0.78rem; color:#64748B; line-height:1.55;">
Tu reçois ce courriel parce que tu es client(e) TARGO à
<strong style="color:#1B2E24;">{{description}}</strong>.<br>
Une question ? Écris-nous à
<a href="mailto:support@targo.ca" style="color:#00C853; text-decoration:none;">support@targo.ca</a>
ou appelle au
<a href="tel:5144480773" style="color:#00C853; text-decoration:none;">514&nbsp;448-0773</a>
/ <a href="tel:18558882746" style="color:#00C853; text-decoration:none;">1&nbsp;855&nbsp;888-2746</a>.
Support&nbsp;7j/7.
</div>
</td>
</tr>
</table>
<!-- Dark footer band — logo TARGO blanc (fond sombre, per brand guide §1)
+ adresse + copyright. Pas de slogan ni de wordmark stylisé en
CSS — on utilise le vrai logo image (variante blanche, "fonds
sombres" du brand guide).
TODO: la première fois, uploader targo-logo-white.svg/png via
l'éditeur de template → /campaigns/assets/upload, puis remplacer
la `src` ci-dessous par l'URL retournée. En attendant on utilise
le logo green qui se voit OK sur fond sombre (suffisant pour
test) mais pas pixel-perfect avec le guide. -->
<table role="presentation" width="600" cellspacing="0" cellpadding="0" border="0"
style="max-width:600px; margin-top:12px; background:#1C1E26; border-radius:12px; overflow:hidden;">
<tr>
<td style="padding:26px 36px 22px; text-align:center;">
<img src="https://xqy3m.mjt.lu/img2/xqy3m/eed4d18c-8065-4c5f-b47c-58af63171cd0/content"
alt="TARGO" width="120"
style="display:inline-block; border:0; outline:none; text-decoration:none; max-width:120px; height:auto;">
<div style="font-size:0.7rem; color:rgba(255,255,255,0.45); margin-top:18px; line-height:1.55;">
<a href="https://www.targo.ca" style="color:rgba(255,255,255,0.7); text-decoration:none;">www.targo.ca</a>
&nbsp;·&nbsp; 1867 ch. de la rivière, Ste-Clotilde, QC<br>
© {{year}} TARGO Communications · Tous droits réservés.
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>

0
services/targo-hub/templates/gift-email-fr-mjml.mjml → services/targo-hub/templates/gift-email-fr.mjml
View File