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>
This commit is contained in:
Serreau Jovann
67
src/Command/TestMailCommand.php
Normal file
67
src/Command/TestMailCommand.php
Normal file
@@ -0,0 +1,67 @@
|
||||
<?php
|
||||
|
||||
namespace App\Command;
|
||||
|
||||
use App\Service\MailerService;
|
||||
use Symfony\Component\Console\Attribute\AsCommand;
|
||||
use Symfony\Component\Console\Command\Command;
|
||||
use Symfony\Component\Console\Input\InputArgument;
|
||||
use Symfony\Component\Console\Input\InputInterface;
|
||||
use Symfony\Component\Console\Input\InputOption;
|
||||
use Symfony\Component\Console\Output\OutputInterface;
|
||||
use Symfony\Component\Console\Style\SymfonyStyle;
|
||||
use Twig\Environment;
|
||||
|
||||
#[AsCommand(
|
||||
name: 'app:mail:test',
|
||||
description: 'Envoie un email de test complet (tableau, texte, bouton, lien, fichier) pour verifier le rendu',
|
||||
)]
|
||||
class TestMailCommand extends Command
|
||||
{
|
||||
public function __construct(
|
||||
private MailerService $mailer,
|
||||
private Environment $twig,
|
||||
) {
|
||||
parent::__construct();
|
||||
}
|
||||
|
||||
protected function configure(): void
|
||||
{
|
||||
$this
|
||||
->addArgument('email', InputArgument::REQUIRED, 'Adresse email du destinataire')
|
||||
->addOption('mode', null, InputOption::VALUE_REQUIRED, 'Mode d\'envoi (dev ou prod)', 'dev');
|
||||
}
|
||||
|
||||
protected function execute(InputInterface $input, OutputInterface $output): int
|
||||
{
|
||||
$io = new SymfonyStyle($input, $output);
|
||||
$email = $input->getArgument('email');
|
||||
$env = $input->getOption('mode');
|
||||
|
||||
$subject = 'prod' === $env
|
||||
? '[PROD] CRM SITECONSEIL - Email de test production'
|
||||
: '[DEV] CRM SITECONSEIL - Email de test developpement';
|
||||
|
||||
$io->title('Envoi du mail de test ('.$env.')');
|
||||
$io->text('Destinataire : '.$email);
|
||||
|
||||
$html = $this->twig->render('emails/test_mail.html.twig', [
|
||||
'env' => $env,
|
||||
'email' => $email,
|
||||
'date' => new \DateTimeImmutable(),
|
||||
]);
|
||||
|
||||
$this->mailer->sendEmail(
|
||||
$email,
|
||||
$subject,
|
||||
$html,
|
||||
null,
|
||||
null,
|
||||
false,
|
||||
);
|
||||
|
||||
$io->success('Email de test envoye a '.$email.' (env: '.$env.')');
|
||||
|
||||
return Command::SUCCESS;
|
||||
}
|
||||
}
|
||||
209
templates/emails/test_mail.html.twig
Normal file
209
templates/emails/test_mail.html.twig
Normal file
@@ -0,0 +1,209 @@
|
||||
{% 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 € / 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 € / 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 € / 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 € / 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;">📎</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
Block a user