From a6fc8fdf3bebd38e61d9b8201a930a3e4ad6f6a8 Mon Sep 17 00:00:00 2001
From: Serreau Jovann <jovann@siteconseil.fr>
Date: Fri, 30 Jan 2026 15:59:19 +0100
Subject: [PATCH] =?UTF-8?q?```=20=E2=9C=A8=20feat(reservation):=20Ajoute?=
 =?UTF-8?q?=20le=20panier=20et=20s=C3=A9lection=20de=20date=20globale?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ajoute un composant de panier accessible depuis toutes les pages de réservation et un sélecteur de date global.
```
---
 assets/reserve.js                  |  4 ++
 assets/tools/FlowAddToCart.js      | 72 ++++++++++++++++++++++++++++++
 templates/revervation/produit.twig | 15 ++++---
 3 files changed, 86 insertions(+), 5 deletions(-)
 create mode 100644 assets/tools/FlowAddToCart.js

diff --git a/assets/reserve.js b/assets/reserve.js
index 228caa4..1472a57 100644
--- a/assets/reserve.js
+++ b/assets/reserve.js
@@ -3,6 +3,7 @@ import { UtmEvent, UtmAccount } from "./tools/UtmEvent.js";
 import { CookieBanner } from "./tools/CookieBanner.js";
 import { FlowReserve } from "./tools/FlowReserve.js";
 import { FlowDatePicker } from "./tools/FlowDatePicker.js";
+import { FlowAddToCart } from "./tools/FlowAddToCart.js";
 import * as Turbo from "@hotwired/turbo";
 import { onLCP, onINP, onCLS } from 'web-vitals';
 import AOS from 'aos';
@@ -259,6 +260,9 @@ const registerComponents = () => {
 
     if(!customElements.get('flow-datepicker'))
         customElements.define('flow-datepicker',FlowDatePicker)
+
+    if(!customElements.get('flow-add-to-cart'))
+        customElements.define('flow-add-to-cart',FlowAddToCart)
 };
 
 document.addEventListener('DOMContentLoaded', () => {
diff --git a/assets/tools/FlowAddToCart.js b/assets/tools/FlowAddToCart.js
new file mode 100644
index 0000000..3c84a81
--- /dev/null
+++ b/assets/tools/FlowAddToCart.js
@@ -0,0 +1,72 @@
+export class FlowAddToCart extends HTMLElement {
+    constructor() {
+        super();
+    }
+
+    connectedCallback() {
+        this.btn = this.querySelector('button');
+        if (!this.btn) return;
+
+        this.productId = this.getAttribute('product-id');
+        this.btn.addEventListener('click', (e) => {
+            e.preventDefault();
+            this.addToCart();
+        });
+    }
+
+    async addToCart() {
+        // 1. Check Dates
+        const dates = JSON.parse(localStorage.getItem('reservation_dates') || '{}');
+        if (!dates.start || !dates.end) {
+            // Open Date Picker if no dates
+            document.dispatchEvent(new CustomEvent('open-date-picker'));
+            return;
+        }
+
+        // 2. Loading State
+        const originalContent = this.btn.innerHTML;
+        this.btn.disabled = true;
+        this.btn.innerHTML = '<span class="animate-spin inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full"></span>';
+
+        try {
+            // 3. Check Availability
+            const response = await fetch('/produit/check', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({
+                    id: this.productId,
+                    start: dates.start,
+                    end: dates.end
+                })
+            });
+
+            if (!response.ok) throw new Error('Network error');
+            const data = await response.json();
+
+            if (data.dispo) {
+                // 4. Add to Cart
+                const list = JSON.parse(localStorage.getItem('pl_list') || '[]');
+                if (!list.includes(this.productId)) {
+                    list.push(this.productId);
+                    localStorage.setItem('pl_list', JSON.stringify(list));
+                    window.dispatchEvent(new CustomEvent('cart:updated'));
+                }
+                
+                // Open Cart
+                const cart = document.querySelector('[is="flow-reserve"]');
+                if (cart) cart.open();
+
+            } else {
+                // 5. Not Available
+                alert("Ce produit n'est pas disponible pour les dates sélectionnées.");
+            }
+
+        } catch (error) {
+            console.error(error);
+            alert("Une erreur est survenue.");
+        } finally {
+            this.btn.disabled = false;
+            this.btn.innerHTML = originalContent;
+        }
+    }
+}
diff --git a/templates/revervation/produit.twig b/templates/revervation/produit.twig
index 2314048..75c9ad6 100644
--- a/templates/revervation/produit.twig
+++ b/templates/revervation/produit.twig
@@ -228,13 +228,18 @@
                                     Structure soumise à des conditions spéciales.
                                 </p>
                             </div>
+                            <a href="{{ path('reservation_contact', {id: product.id}) }}"
+                               class="flex items-center justify-center w-full py-6 md:py-8 bg-slate-900 text-white rounded-[2.5rem] font-black uppercase text-[11px] md:text-[12px] tracking-[0.3em] hover:bg-[#f39e36] transition-all shadow-2xl hover:scale-[1.02] active:scale-95">
+                                Nous contacter
+                            </a>
+                        {% else %}
+                            <flow-add-to-cart product-id="{{ product.id }}">
+                                <button class="flex items-center justify-center w-full py-6 md:py-8 bg-slate-900 text-white rounded-[2.5rem] font-black uppercase text-[11px] md:text-[12px] tracking-[0.3em] hover:bg-[#f39e36] transition-all shadow-2xl hover:scale-[1.02] active:scale-95">
+                                    Vérifier la disponibilité
+                                </button>
+                            </flow-add-to-cart>
                         {% endif %}
 
-                        <a href="{{ path('reservation_contact', {id: product.id}) }}"
-                           class="flex items-center justify-center w-full py-6 md:py-8 bg-slate-900 text-white rounded-[2.5rem] font-black uppercase text-[11px] md:text-[12px] tracking-[0.3em] hover:bg-[#f39e36] transition-all shadow-2xl hover:scale-[1.02] active:scale-95">
-                            {{ (product.category == "2-7 ans") ? 'Nous contacter' : 'Vérifier la disponibilité' }}
-                        </a>
-
                         <p class="text-center text-[9px] font-black text-slate-300 uppercase tracking-widest italic">
                             Devis gratuit • Ludikevent • Qualité Pro
                         </p>