admin/crm_ecosplay
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
a3077ee5db7846f0c5efe402edb08c47a4822bb4
crm_ecosplay/templates/emails/test_mail.html.twig
Serreau Jovann a3077ee5db feat: ajout commande app:mail:test + correction compatibilite text-decoration 
src/Command/TestMailCommand.php (nouveau fichier):
- Commande Symfony app:mail:test <email> --mode=dev|prod
- Envoie un email de test complet pour verifier le rendu sur tous les clients
- Option --mode pour afficher un bandeau DEV (jaune) ou PROD (rouge)

templates/emails/test_mail.html.twig (nouveau fichier):
- Bandeau environnement colore (dev: #f59e0b jaune, prod: #dc2626 rouge)
- Bloc info sombre avec destinataire, environnement et date/heure
- Tableau de donnees avec 3 services (Esy-Web, Esy-Mail, Esy-Defender Pro),
  tarifs, statuts (ACTIF vert, IMPAYE rouge) et ligne TOTAL
- Liste de verification des styles: gras, italique, souligne, lien, couleurs
- Bloc alerte avec bordure laterale gold et fond gris
- 2 boutons centres (Gold #fabf04 et Dark #111827) avec fallback VML
  pour Outlook via v:roundrect
- Tableau des 5 applications SITECONSEIL avec liens et descriptions
- Simulation de fichier joint avec icone trombone
- Pied de mail avec mention de la commande utilisee
- Tout en CSS inline compatible: padding longhand, margin longhand,
  mso-line-height-rule:exactly, line-height en px, background-color,
  pas de rgba/border-radius/box-shadow

templates/emails/test_mail.html.twig:
- Balise <u> remplacee par span avec text-decoration: underline en inline
  (la balise <u> n'est pas supportee par ProtonMail, Orange iOS, SFR iOS)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-02 20:45:37 +02:00

210 lines
16 KiB
Twig
Raw Blame History

{% extends 'email/base.html.twig' %}
{% block title %}Email de test - CRM SITECONSEIL{% endblock %}
{% block content %}
{# ─── Bandeau environnement ─── #}
{% if env == 'prod' %}
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="background-color: #dc2626; color: #ffffff; padding-top: 8px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-align: center;">
ENVIRONNEMENT PRODUCTION
</td>
</tr>
</table>
{% else %}
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="background-color: #f59e0b; color: #111827; padding-top: 8px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; text-align: center;">
ENVIRONNEMENT DEVELOPPEMENT
</td>
</tr>
</table>
{% endif %}
{# ─── Titre ─── #}
<h1 style="font-size: 20px; font-weight: 700; text-transform: uppercase; margin-top: 16px; margin-right: 0; margin-bottom: 16px; margin-left: 0;">Email de test CRM SITECONSEIL</h1>
{# ─── Texte d'introduction ─── #}
<p style="font-size: 14px; mso-line-height-rule: exactly; line-height: 22px; margin-top: 0; margin-right: 0; margin-bottom: 16px; margin-left: 0;">
Bonjour,
</p>
<p style="font-size: 14px; mso-line-height-rule: exactly; line-height: 22px; margin-top: 0; margin-right: 0; margin-bottom: 16px; margin-left: 0;">
Ceci est un <strong>email de test</strong> envoye depuis le CRM SITECONSEIL le <strong>{{ date|date('d/m/Y') }}</strong> a <strong>{{ date|date('H:i:s') }}</strong>.
Cet email permet de verifier le rendu sur differents clients email (Outlook, Gmail, Apple Mail, Orange, etc.).
</p>
{# ─── Bloc info sombre ─── #}
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 16px; margin-right: 0; margin-bottom: 16px; margin-left: 0;">
<tr>
<td style="background-color: #111827; color: #ffffff; padding-top: 16px; padding-bottom: 16px; padding-left: 20px; padding-right: 20px;">
<p style="font-size: 11px; text-transform: uppercase; letter-spacing: 1px; margin-top: 0; margin-right: 0; margin-bottom: 8px; margin-left: 0; color: #fabf04; font-weight: 700;">Informations du test</p>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding-top: 4px; padding-bottom: 4px; padding-left: 0; padding-right: 0; color: #999999; font-size: 12px; width: 120px;">Destinataire</td>
<td style="padding-top: 4px; padding-bottom: 4px; padding-left: 0; padding-right: 0; color: #ffffff; font-size: 13px; font-weight: 700;">{{ email }}</td>
</tr>
<tr>
<td style="padding-top: 4px; padding-bottom: 4px; padding-left: 0; padding-right: 0; color: #999999; font-size: 12px;">Environnement</td>
<td style="padding-top: 4px; padding-bottom: 4px; padding-left: 0; padding-right: 0; color: #ffffff; font-size: 13px; font-weight: 700;">{{ env|upper }}</td>
</tr>
<tr>
<td style="padding-top: 4px; padding-bottom: 4px; padding-left: 0; padding-right: 0; color: #999999; font-size: 12px;">Date</td>
<td style="padding-top: 4px; padding-bottom: 4px; padding-left: 0; padding-right: 0; color: #ffffff; font-size: 13px; font-weight: 700;">{{ date|date('d/m/Y H:i:s') }}</td>
</tr>
</table>
</td>
</tr>
</table>
{# ─── Tableau de donnees ─── #}
<p style="font-size: 14px; mso-line-height-rule: exactly; line-height: 22px; margin-top: 0; margin-right: 0; margin-bottom: 8px; margin-left: 0; font-weight: 700;">
Exemple de tableau de donnees :
</p>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 0; margin-right: 0; margin-bottom: 16px; margin-left: 0; border: 1px solid #e5e5e5;">
<tr>
<td style="background-color: #111827; color: #ffffff; padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 1px solid #333333;">Service</td>
<td style="background-color: #111827; color: #ffffff; padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; text-align: right; border-bottom: 1px solid #333333;">Tarif</td>
<td style="background-color: #111827; color: #ffffff; padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; text-align: center; border-bottom: 1px solid #333333;">Statut</td>
</tr>
<tr>
<td style="padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 13px; font-weight: 700; border-bottom: 1px solid #eeeeee;">Esy-Web</td>
<td style="padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 13px; text-align: right; border-bottom: 1px solid #eeeeee;">100,00 &#8364; / mois</td>
<td style="padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 11px; text-align: center; border-bottom: 1px solid #eeeeee; color: #16a34a; font-weight: 700;">ACTIF</td>
</tr>
<tr>
<td style="padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 13px; font-weight: 700; border-bottom: 1px solid #eeeeee;">Esy-Mail</td>
<td style="padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 13px; text-align: right; border-bottom: 1px solid #eeeeee;">30,00 &#8364; / mois</td>
<td style="padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 11px; text-align: center; border-bottom: 1px solid #eeeeee; color: #16a34a; font-weight: 700;">ACTIF</td>
</tr>
<tr>
<td style="padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 13px; font-weight: 700; border-bottom: 1px solid #eeeeee;">Esy-Defender Pro</td>
<td style="padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 13px; text-align: right; border-bottom: 1px solid #eeeeee;">60,00 &#8364; / mois</td>
<td style="padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 11px; text-align: center; border-bottom: 1px solid #eeeeee; color: #dc2626; font-weight: 700;">IMPAYE</td>
</tr>
<tr style="background-color: #f9fafb;">
<td style="padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 13px; font-weight: 700;">TOTAL</td>
<td style="padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px; font-size: 13px; font-weight: 700; text-align: right;">190,00 &#8364; / mois</td>
<td style="padding-top: 10px; padding-bottom: 10px; padding-left: 12px; padding-right: 12px;"></td>
</tr>
</table>
{# ─── Texte avec mise en forme ─── #}
<p style="font-size: 14px; mso-line-height-rule: exactly; line-height: 22px; margin-top: 0; margin-right: 0; margin-bottom: 8px; margin-left: 0;">
Verification des styles de texte :
</p>
<ul style="font-size: 14px; mso-line-height-rule: exactly; line-height: 25px; margin-top: 0; margin-right: 0; margin-bottom: 16px; margin-left: 0; padding-left: 20px;">
<li>Texte <strong>gras</strong></li>
<li>Texte <em>italique</em></li>
<li>Texte <span style="text-decoration: underline;">souligne</span></li>
<li>Texte avec <a href="https://crm.siteconseil.fr" style="color: #4338ca; text-decoration: underline;">lien cliquable</a></li>
<li>Texte en <span style="color: #16a34a; font-weight: 700;">vert (succes)</span></li>
<li>Texte en <span style="color: #dc2626; font-weight: 700;">rouge (erreur)</span></li>
<li>Texte en <span style="color: #fabf04; font-weight: 700;">or (accent)</span></li>
</ul>
{# ─── Bloc alerte ─── #}
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 0; margin-right: 0; margin-bottom: 16px; margin-left: 0;">
<tr>
<td style="border-left: 3px solid #fabf04; background-color: #f9fafb; padding-top: 12px; padding-bottom: 12px; padding-left: 16px; padding-right: 16px; font-size: 13px; mso-line-height-rule: exactly; line-height: 20px;">
<strong>Information :</strong> ceci est un bloc d'alerte avec bordure laterale gold. Il est utilise pour mettre en avant une information importante dans les emails.
</td>
</tr>
</table>
{# ─── Boutons ─── #}
<p style="font-size: 14px; mso-line-height-rule: exactly; line-height: 22px; margin-top: 0; margin-right: 0; margin-bottom: 8px; margin-left: 0; font-weight: 700;">
Verification des boutons :
</p>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 0; margin-right: 0; margin-bottom: 16px; margin-left: 0;">
<tr>
<td align="center" style="padding-top: 8px; padding-bottom: 8px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="https://crm.siteconseil.fr" style="height:44px;v-text-anchor:middle;width:280px;" arcsize="0%" fillcolor="#fabf04" stroke="f">
<center style="color:#111827;font-family:Arial,sans-serif;font-size:13px;font-weight:bold;text-transform:uppercase;letter-spacing:1px;">Bouton principal (Gold)</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="https://crm.siteconseil.fr" style="display: inline-block; background-color: #fabf04; border: 1px solid #e5a800; padding-top: 12px; padding-bottom: 12px; padding-left: 32px; padding-right: 32px; color: #111827; font-weight: 700; text-transform: uppercase; font-size: 13px; text-decoration: none; letter-spacing: 1px;">Bouton principal (Gold)</a>
<!--<![endif]-->
</td>
</tr>
<tr>
<td align="center" style="padding-top: 8px; padding-bottom: 8px;">
<!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" href="https://crm.siteconseil.fr" style="height:44px;v-text-anchor:middle;width:280px;" arcsize="0%" fillcolor="#111827" stroke="f">
<center style="color:#ffffff;font-family:Arial,sans-serif;font-size:13px;font-weight:bold;text-transform:uppercase;letter-spacing:1px;">Bouton secondaire (Dark)</center>
</v:roundrect>
<![endif]-->
<!--[if !mso]><!-->
<a href="https://crm.siteconseil.fr" style="display: inline-block; background-color: #111827; border: 1px solid #111827; padding-top: 12px; padding-bottom: 12px; padding-left: 32px; padding-right: 32px; color: #ffffff; font-weight: 700; text-transform: uppercase; font-size: 13px; text-decoration: none; letter-spacing: 1px;">Bouton secondaire (Dark)</a>
<!--<![endif]-->
</td>
</tr>
</table>
{# ─── Liens vers les applications ─── #}
<p style="font-size: 14px; mso-line-height-rule: exactly; line-height: 22px; margin-top: 0; margin-right: 0; margin-bottom: 8px; margin-left: 0; font-weight: 700;">
Liens vers les applications SITECONSEIL :
</p>
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 0; margin-right: 0; margin-bottom: 16px; margin-left: 0; border: 1px solid #e5e5e5;">
<tr>
<td style="padding-top: 8px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px; border-bottom: 1px solid #eeeeee;">
<a href="https://crm.siteconseil.fr" style="color: #4338ca; text-decoration: none; font-size: 13px; font-weight: 700;">crm.siteconseil.fr</a>
<span style="font-size: 11px; color: #888888;"> - Plateforme de gestion</span>
</td>
</tr>
<tr>
<td style="padding-top: 8px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px; border-bottom: 1px solid #eeeeee;">
<a href="https://sign.siteconseil.fr" style="color: #4338ca; text-decoration: none; font-size: 13px; font-weight: 700;">sign.siteconseil.fr</a>
<span style="font-size: 11px; color: #888888;"> - Signature electronique</span>
</td>
</tr>
<tr>
<td style="padding-top: 8px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px; border-bottom: 1px solid #eeeeee;">
<a href="https://payment.siteconseil.fr" style="color: #4338ca; text-decoration: none; font-size: 13px; font-weight: 700;">payment.siteconseil.fr</a>
<span style="font-size: 11px; color: #888888;"> - Portail de paiement</span>
</td>
</tr>
<tr>
<td style="padding-top: 8px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px; border-bottom: 1px solid #eeeeee;">
<a href="https://status.siteconseil.fr" style="color: #4338ca; text-decoration: none; font-size: 13px; font-weight: 700;">status.siteconseil.fr</a>
<span style="font-size: 11px; color: #888888;"> - Status des services</span>
</td>
</tr>
<tr>
<td style="padding-top: 8px; padding-bottom: 8px; padding-left: 12px; padding-right: 12px;">
<a href="https://stripe.siteconseil.fr" style="color: #4338ca; text-decoration: none; font-size: 13px; font-weight: 700;">stripe.siteconseil.fr</a>
<span style="font-size: 11px; color: #888888;"> - Webhooks Stripe / Dashboard Connect</span>
</td>
</tr>
</table>
{# ─── Fichier joint simule ─── #}
<table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" style="margin-top: 0; margin-right: 0; margin-bottom: 16px; margin-left: 0;">
<tr>
<td style="background-color: #f9fafb; border: 1px solid #e5e5e5; padding-top: 12px; padding-bottom: 12px; padding-left: 16px; padding-right: 16px;">
<table role="presentation" cellpadding="0" cellspacing="0" border="0">
<tr>
<td style="padding-right: 12px; vertical-align: middle;">
<span style="font-size: 24px;">&#128206;</span>
</td>
<td style="vertical-align: middle;">
<p style="font-size: 13px; font-weight: 700; margin-top: 0; margin-right: 0; margin-bottom: 2px; margin-left: 0;">facture-exemple-2026-04.pdf</p>
<p style="font-size: 11px; color: #888888; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0;">Simulation d'un fichier joint (128 Ko)</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
{# ─── Pied de mail ─── #}
<p style="font-size: 12px; color: #888888; mso-line-height-rule: exactly; line-height: 18px; margin-top: 16px; margin-right: 0; margin-bottom: 0; margin-left: 0;">
Cet email a ete envoye automatiquement par la commande <strong>app:mail:test</strong>.
Si vous recevez cet email, la configuration du service de messagerie est fonctionnelle.
</p>
{% endblock %}
Reference in New Issue View Git Blame Copy Permalink