louis/gigafibre-fsm
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
79ae38db60
gigafibre-fsm/services/targo-hub/templates/gift-email-en.mjml
louispaulb 79ae38db60 feat(campaigns): MJML canonical templates + test-send button 
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>
2026-05-21 22:36:35 -04:00

133 lines
7.2 KiB
XML
Raw Blame History

<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>
Reference in New Issue View Git Blame Copy Permalink