feat(admin.js): Ajoute le calculateur de commission Stripe.
 feat(add.twig): Affiche la commission Stripe estimée pour les tarifs.
 feat(view.twig): Affiche la commission Stripe estimée sur le total contrat et le solde.
```
This commit is contained in:
Serreau Jovann
2026-02-02 12:06:55 +01:00
parent 9bcf2a6823
commit 7ab37b4d8b
4 changed files with 60 additions and 5 deletions

View File

@@ -11,6 +11,7 @@ import { SearchProductDevis, SearchOptionsDevis } from "./libs/SearchProductDevi
import { SearchProductFormule, SearchOptionsFormule } from "./libs/SearchProductFormule.js";
import PlaningLogestics from "./libs/PlaningLogestics.js";
import {SortableReorder} from "./libs/SortableReorder.js";
import { StripeCommissionCalculator } from "./libs/StripeCommissionCalculator.js";
// --- CONFIGURATION SENTRY ---
Sentry.init({
@@ -37,7 +38,8 @@ const registerCustomElements = () => {
{ name: 'search-options', class: SearchOptions, extends: 'button' },
{ name: 'search-productdevis', class: SearchProductDevis, extends: 'button' },
{ name: 'search-optionsdevis', class: SearchOptionsDevis, extends: 'button' },
{ name: 'crm-editor', class: CrmEditor, extends: 'textarea' }
{ name: 'crm-editor', class: CrmEditor, extends: 'textarea' },
{ name: 'stripe-commission-calculator', class: StripeCommissionCalculator, extends: 'div' }
];
elements.forEach(el => {

View File

@@ -0,0 +1,27 @@
export class StripeCommissionCalculator extends HTMLDivElement {
constructor() {
super();
}
connectedCallback() {
this.input = this.querySelector('input');
this.display = this.querySelector('.commission-display');
if (this.input && this.display) {
this.input.addEventListener('input', this.calculate.bind(this));
// Initial calculation
this.calculate();
}
}
calculate() {
const value = parseFloat(this.input.value);
if (!isNaN(value)) {
const commission = (value * 0.015) + 0.25;
this.display.textContent = `~ ${commission.toLocaleString('fr-FR', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} €`;
this.display.parentElement.classList.remove('hidden');
} else {
this.display.parentElement.classList.add('hidden');
}
}
}

View File

@@ -41,7 +41,7 @@
<div class="space-y-8 pb-20">
{# --- 1. BANDEAU DE STATUT RAPIDE --- #}
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
<div class="p-4 rounded-[1.5rem] bg-white/5 border border-white/10 backdrop-blur-md flex items-center justify-between">
<span class="text-[10px] font-black uppercase text-slate-300 tracking-widest">État Juridique</span>
{% if contrat.signed %}
@@ -51,7 +51,21 @@
{% endif %}
</div>
<div class="p-4 rounded-[1.5rem] bg-white/5 border border-white/10 backdrop-blur-md flex items-center justify-between">
<span class="text-[10px] font-black uppercasetext-slate-300 tracking-widest">Reste à percevoir</span>
<div>
<span class="text-[10px] font-black uppercasetext-slate-300 tracking-widest block">Total Contrat</span>
<span class="text-[8px] text-slate-500 italic" title="Pour les cartes standard de l'Espace économique européen">Com. Stripe (EEE) : ~ {{ ((totalHT * 0.015) + 0.25)|number_format(2, ',', ' ') }} €</span>
</div>
<span class="text-xs font-black text-white italic">
{{ totalHT|number_format(2, ',', ' ') }}
</span>
</div>
<div class="p-4 rounded-[1.5rem] bg-white/5 border border-white/10 backdrop-blur-md flex items-center justify-between">
<div>
<span class="text-[10px] font-black uppercasetext-slate-300 tracking-widest block">Reste à percevoir</span>
{% if not soldeOk %}
<span class="text-[8px] text-slate-500 italic" title="Pour les cartes standard de l'Espace économique européen">Com. Stripe (EEE) : ~ {{ ((solde * 0.015) + 0.25)|number_format(2, ',', ' ') }} €</span>
{% endif %}
</div>
<span class="text-xs font-black {{ soldeOk ? 'text-emerald-400' : 'text-rose-500' }} italic">
{{ soldeOk ? 'CONTRAT SOLDÉ' : (solde|number_format(2, ',', ' ') ~ ' €') }}
</span>

View File

@@ -162,21 +162,33 @@
</h3>
<div class="space-y-6">
<div>
<div is="stripe-commission-calculator">
{{ form_label(form.priceDay, 'Tarif 1er Jour (€)', {'label_attr': {'class': 'text-[10px] font-black text-slate-300 uppercase tracking-widest ml-1 mb-2 block'}}) }}
<p class="text-[9px] text-slate-500 italic mb-2 -mt-1">Ou tarif weekend pour les barnums</p>
<div class="relative">
{{ form_widget(form.priceDay, {'attr': {'class': 'w-full bg-slate-900/50 border-white/5 rounded-2xl text-emerald-400 font-black text-xl focus:ring-emerald-500/20 focus:border-emerald-500 transition-all py-4 px-5'}}) }}
<span class="absolute right-5 top-1/2 -translate-y-1/2 text-slate-600 font-bold">€HT</span>
</div>
<div class="flex justify-between items-center mt-1 px-1 {{ form.priceDay.vars.value ? '' : 'hidden' }}">
<p class="text-[9px] text-slate-500 italic" title="Pour les cartes standard de l'Espace économique européen">Com. Stripe (EEE) : 1,5% + 0,25€</p>
<p class="text-[10px] font-bold text-slate-400 commission-display">
~ {{ ((form.priceDay.vars.value * 0.015) + 0.25)|number_format(2, ',', ' ') }}
</p>
</div>
</div>
<div>
<div is="stripe-commission-calculator">
{{ form_label(form.priceSup, 'Tarif Jour Sup. (€)', {'label_attr': {'class': 'text-[10px] font-black text-slate-300 uppercase tracking-widest ml-1 mb-2 block'}}) }}
<div class="relative">
{{ form_widget(form.priceSup, {'attr': {'class': 'w-full bg-slate-900/50 border-white/5 rounded-2xl text-blue-400 font-black text-xl focus:ring-blue-500/20 focus:border-blue-500 transition-all py-4 px-5'}}) }}
<span class="absolute right-5 top-1/2 -translate-y-1/2 text-slate-600 font-bold">€HT</span>
</div>
<div class="flex justify-between items-center mt-1 px-1 {{ form.priceSup.vars.value ? '' : 'hidden' }}">
<p class="text-[9px] text-slate-500 italic" title="Pour les cartes standard de l'Espace économique européen">Com. Stripe (EEE) : 1,5% + 0,25€</p>
<p class="text-[10px] font-bold text-slate-400 commission-display">
~ {{ ((form.priceSup.vars.value * 0.015) + 0.25)|number_format(2, ',', ' ') }}
</p>
</div>
</div>
</div>