feat: page publique /process/contrat/{id} avant signature
Page process contrat avec :
- Header avec reference et type
- Statut (signe/annule)
- Infos association (SIRET, RNA, president, contact)
- Infos client (raison sociale, email)
- Tableau services inclus avec total HT/mois
- Conditions importantes (paiement, impayes, avertissements)
- Liens utiles (page migration, tarifs, CGV)
- Bouton "Signer le contrat" (redirige vers DocuSeal)
- Contact
Controller ContratProcessController :
- /process/contrat/{id} : page de detail
- /process/contrat/{id}/sign : redirection vers DocuSeal
Email contrat_signature : lien vers /process/contrat/{id}
au lieu du lien DocuSeal direct
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Serreau Jovann
178
templates/contrat/process.html.twig
Normal file
178
templates/contrat/process.html.twig
Normal file
@@ -0,0 +1,178 @@
|
||||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Contrat {{ contrat.reference }} - Association E-Cosplay{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="min-h-screen" style="background: linear-gradient(135deg, #f5f5f0 0%, #e8e8e0 100%);">
|
||||
|
||||
{# Header #}
|
||||
<div class="glass-dark text-white py-8">
|
||||
<div class="max-w-4xl mx-auto px-6">
|
||||
<div class="flex items-center gap-4">
|
||||
<img src="/logo.jpg" alt="E-Cosplay" class="h-14 w-auto">
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold uppercase tracking-widest">Contrat de Service</h1>
|
||||
<p class="text-sm text-white/60">{{ contrat.reference }} - {{ contrat.typeLabel }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="max-w-4xl mx-auto px-6 py-10">
|
||||
|
||||
{# Statut #}
|
||||
{% if contrat.state == 'signed' %}
|
||||
<div class="glass-heavy p-6 mb-8 flex items-center gap-4" style="border-left: 4px solid #16a34a;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-green-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<div>
|
||||
<p class="text-lg font-bold text-green-700">Contrat signe</p>
|
||||
<p class="text-sm text-gray-500">Ce contrat a ete signe le {{ contrat.signedAt ? contrat.signedAt|date('d/m/Y H:i') : '' }}.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% elseif contrat.state == 'cancelled' %}
|
||||
<div class="glass-heavy p-6 mb-8 flex items-center gap-4" style="border-left: 4px solid #dc2626;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-10 w-10 text-red-500 shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||||
</svg>
|
||||
<div>
|
||||
<p class="text-lg font-bold text-red-700">Contrat annule</p>
|
||||
<p class="text-sm text-gray-500">Ce contrat a ete annule.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Informations du contrat #}
|
||||
<div class="glass-heavy p-8 mb-8">
|
||||
<h2 class="text-xl font-bold uppercase tracking-wider mb-4">Informations</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div class="glass p-5">
|
||||
<h3 class="text-sm font-bold uppercase tracking-wider mb-3" style="color: #fabf04;">Association E-Cosplay</h3>
|
||||
<div class="space-y-1 text-xs text-gray-600">
|
||||
<p>Association loi 1901 - RNA W022006988</p>
|
||||
<p>42 rue de Saint-Quentin, 02800 Beautor</p>
|
||||
<p>SIRET : 943 121 517 00011</p>
|
||||
<p>President : <strong>Shoko Cosplay - Serreau Jovann</strong></p>
|
||||
<p>Email : <a href="mailto:client@e-cosplay.fr" style="color: #fabf04;">client@e-cosplay.fr</a></p>
|
||||
<p>Tel : 07 66 95 70 06</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="glass p-5">
|
||||
<h3 class="text-sm font-bold uppercase tracking-wider mb-3">Client</h3>
|
||||
<div class="space-y-1 text-xs text-gray-600">
|
||||
<p><strong>{{ contrat.raisonSociale }}</strong></p>
|
||||
<p>{{ contrat.email }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Services #}
|
||||
{% if contrat.services|length > 0 %}
|
||||
<div class="glass-heavy p-8 mb-8">
|
||||
<h2 class="text-xl font-bold uppercase tracking-wider mb-4">Services inclus</h2>
|
||||
<div class="glass overflow-hidden">
|
||||
<table class="w-full text-sm">
|
||||
<thead>
|
||||
<tr class="glass-dark text-white">
|
||||
<th class="px-4 py-2 text-left font-bold uppercase text-[10px] tracking-widest">Service</th>
|
||||
<th class="px-4 py-2 text-center font-bold uppercase text-[10px] tracking-widest">Quantite</th>
|
||||
<th class="px-4 py-2 text-right font-bold uppercase text-[10px] tracking-widest">Prix HT</th>
|
||||
<th class="px-4 py-2 text-right font-bold uppercase text-[10px] tracking-widest">Sous-total</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% set catalogLabels = {
|
||||
'esite_vitrine': 'E-Site Vitrine',
|
||||
'esite_ecommerce': 'E-Site E-Commerce',
|
||||
'esite_hors_cms': 'Site hors CMS Esy-Web',
|
||||
'email_3go': 'E-Mail 3 Go',
|
||||
'email_50go': 'E-Mail 50 Go',
|
||||
'ndd_gestion': 'Nom de domaine - Gestion',
|
||||
'ndd_renouvellement': 'Nom de domaine - Renouvellement',
|
||||
'eprotect': 'E-Protect Pro',
|
||||
'ecalendar': 'E-Calendar',
|
||||
'echat': 'E-Chat',
|
||||
'emailer': 'E-Mailer'
|
||||
} %}
|
||||
{% for s in contrat.services %}
|
||||
<tr class="border-b border-white/20 {{ loop.index is odd ? 'bg-white/30' : '' }}">
|
||||
<td class="px-4 py-2 font-bold text-xs">{{ catalogLabels[s.service] ?? s.service }}</td>
|
||||
<td class="px-4 py-2 text-center text-xs">{{ s.quantity }}</td>
|
||||
<td class="px-4 py-2 text-right text-xs font-mono">{{ s.priceHt|number_format(2, ',', ' ') }} €</td>
|
||||
<td class="px-4 py-2 text-right text-xs font-mono font-bold">{{ (s.priceHt * s.quantity)|number_format(2, ',', ' ') }} €</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
<tfoot>
|
||||
<tr class="glass-dark text-white">
|
||||
<td colspan="3" class="px-4 py-2 text-right font-bold uppercase text-[10px] tracking-widest">Total HT / mois</td>
|
||||
<td class="px-4 py-2 text-right font-mono font-bold">{{ contrat.totalHt|number_format(2, ',', ' ') }} €</td>
|
||||
</tr>
|
||||
</tfoot>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Conditions importantes #}
|
||||
<div class="glass-heavy p-8 mb-8">
|
||||
<h2 class="text-xl font-bold uppercase tracking-wider mb-4">Conditions importantes</h2>
|
||||
<div class="space-y-3">
|
||||
<div class="glass p-4" style="border-left: 3px solid #fabf04;">
|
||||
<p class="text-xs font-bold mb-1">Paiement</p>
|
||||
<p class="text-xs text-gray-500">Le premier paiement devra etre effectue par carte bancaire ou prelevement SEPA. Les virements ne sont pas acceptes pour le premier paiement.</p>
|
||||
</div>
|
||||
<div class="glass p-4" style="border-left: 3px solid #dc2626;">
|
||||
<p class="text-xs font-bold mb-1">Impayes</p>
|
||||
<p class="text-xs text-gray-500">En cas de non-paiement, les services seront automatiquement suspendus. Aucun renouvellement sans paiement prealable.</p>
|
||||
</div>
|
||||
<div class="glass p-4" style="border-left: 3px solid #ea580c;">
|
||||
<p class="text-xs font-bold mb-1">Avertissements</p>
|
||||
<p class="text-xs text-gray-500">En cas de manquement, un systeme d'avertissement s'applique. Au 3eme avertissement, la resiliation est definitive.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Liens utiles #}
|
||||
<div class="glass-heavy p-8 mb-8">
|
||||
<h2 class="text-xl font-bold uppercase tracking-wider mb-4">Documents et liens utiles</h2>
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<a href="{{ path('app_move_from_siteconseil') }}" target="_blank" class="glass p-4 text-center hover:bg-white/80 transition-all">
|
||||
<p class="text-sm font-bold mb-1">Page migration</p>
|
||||
<p class="text-xs text-gray-500">Toutes les informations sur la migration</p>
|
||||
</a>
|
||||
<a href="{{ path('app_legal_tarif') }}" target="_blank" class="glass p-4 text-center hover:bg-white/80 transition-all">
|
||||
<p class="text-sm font-bold mb-1">Grille tarifaire</p>
|
||||
<p class="text-xs text-gray-500">Tarifs en vigueur</p>
|
||||
</a>
|
||||
<a href="{{ path('app_legal_cgv') }}" target="_blank" class="glass p-4 text-center hover:bg-white/80 transition-all">
|
||||
<p class="text-sm font-bold mb-1">CGV</p>
|
||||
<p class="text-xs text-gray-500">Conditions generales de vente</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{# Bouton signer #}
|
||||
{% if contrat.state == 'send' and contrat.submissionId %}
|
||||
<div class="glass-heavy p-8 text-center mb-8">
|
||||
<p class="text-sm text-gray-600 mb-4">En signant ce contrat, vous acceptez les conditions ci-dessus, les CGV et la grille tarifaire de l'Association E-Cosplay.</p>
|
||||
<a href="{{ path('app_contrat_sign', {id: contrat.id}) }}"
|
||||
class="inline-block px-8 py-4 text-white font-bold uppercase text-sm tracking-wider hover:opacity-90 transition-all" style="background: #fabf04; color: #111;">
|
||||
Signer le contrat
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{# Contact #}
|
||||
<div class="glass-heavy p-8 text-center">
|
||||
<p class="text-sm text-gray-600 mb-2">Une question sur ce contrat ?</p>
|
||||
<p class="text-sm">
|
||||
<a href="mailto:client@e-cosplay.fr" class="font-bold text-lg" style="color: #fabf04;">client@e-cosplay.fr</a>
|
||||
</p>
|
||||
<p class="text-xs text-gray-400 mt-2">Tel : 07 66 95 70 06</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
@@ -33,14 +33,14 @@
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
{% if signUrl %}
|
||||
{% if processUrl is defined and processUrl %}
|
||||
<p style="font-family: Arial, Helvetica, sans-serif; font-size: 14px; color: #374151; line-height: 22px; margin: 16px 0;">
|
||||
Une fois informe, veuillez signer le contrat en cliquant ci-dessous :
|
||||
Veuillez consulter les details du contrat et le signer en cliquant ci-dessous :
|
||||
</p>
|
||||
<table cellpadding="0" cellspacing="0" style="margin: 20px auto;">
|
||||
<tr>
|
||||
<td style="background-color: #fabf04; padding: 14px 32px;">
|
||||
<a href="{{ signUrl }}" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #111827; text-decoration: none;">Signer le contrat</a>
|
||||
<a href="{{ processUrl }}" style="font-family: Arial, Helvetica, sans-serif; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #111827; text-decoration: none;">Voir et signer le contrat</a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
Reference in New Issue
Block a user