Votre panier
- - -
-
- Decouvrir nos produits
-
-
-
- -
-
-
-
-
- Valider ma commande
-
-
-
-
- ${escHtml(item.libelle)}
- ${formatPrice(item.prix_cents)} / unite${isMenu && (item.supplement_cents ?? 0) > 0 ? ` + ${formatPrice(item.supplement_cents)} suppl.` : ''}
- ${isMenu && item.composition ? renderCompositionBlock(item) : ''}
-
-
-
- ${item.quantite}
-
-
- ${formatPrice(lineTotalCents)}
-
- `;
- cartList.appendChild(row);
- });
-
- /* Attach event listeners after render */
- cartList.querySelectorAll('.qty-btn--minus').forEach(btn => {
- btn.addEventListener('click', () => {
- const idx = parseInt(btn.dataset.index, 10);
- const cart = getCart();
- updateQuantity(idx, cart[idx].quantite - 1);
- renderCart();
- });
- });
-
- cartList.querySelectorAll('.qty-btn--plus').forEach(btn => {
- btn.addEventListener('click', () => {
- const idx = parseInt(btn.dataset.index, 10);
- const cart = getCart();
- updateQuantity(idx, cart[idx].quantite + 1);
- renderCart();
- });
- });
-
- cartList.querySelectorAll('.cart-line__remove').forEach(btn => {
- btn.addEventListener('click', () => {
- const idx = parseInt(btn.dataset.index, 10);
- removeFromCart(idx);
- renderCart();
- });
- });
-
- /* Update totals */
- const ttcCents = getTotalCents();
- /* Back-calculate HT from TTC (prices assumed to be TTC already) */
- const htCents = Math.round(ttcCents / (1 + TVA_RATE));
- const tvaCents = ttcCents - htCents;
-
- if (totalTTC) totalTTC.textContent = formatPrice(ttcCents);
- if (totalHT) totalHT.textContent = formatPrice(htCents);
- if (totalTVA) totalTVA.textContent = formatPrice(tvaCents);
-}
-
-/**
- * Builds the composition breakdown HTML for a menu cart line.
- * Renders burger (with personalisation options), accompagnement, boisson, sauce,
- * and the supplement summary if applicable. Le format Maxi se lit dans le libelle de
- * l'accompagnement (variante "Grande ...") et la ligne de supplement, pas un suffixe.
- *
- * @param {Object} item — cart item with type === 'menu' and composition object
- * @returns {string} HTML string
- */
-function renderCompositionBlock(item) {
- const c = item.composition;
- if (!c) return '';
-
- // Tolerant aux champs absents : depuis L2 (composeur slot-driven), un menu peut
- // ne pas avoir tous les slots (ex. pas de sauce) -> ne pas supposer leur presence.
- const parts = [];
- if (c.burger) {
- const burgerOpts = c.burger.options && c.burger.options.length
- ? ` (${c.burger.options.map(o => o === 'sans-oignon' ? 'sans oignon' : 'avec fromage').join(', ')})`
- : '';
- parts.push(`${escHtml(c.burger.libelle)}${burgerOpts}`);
- }
- // libelle fait foi : en Maxi l'accompagnement porte deja sa variante par nom
- // ("Grande Frite"). Plus de suffixe taille -- il doublait le nom ("Grande Frite
- // grande") et "normale"/"grande" mentait pour la boisson (le Maxi ne l'agrandit pas).
- if (c.accompagnement) {
- parts.push(escHtml(c.accompagnement.libelle));
- }
- if (c.boisson) {
- parts.push(escHtml(c.boisson.libelle));
- }
- if (c.sauce) {
- parts.push(escHtml(c.sauce.libelle));
- }
-
- const supplTotal = item.supplement_cents ?? 0;
-
- return `
- -
- ${parts.map(t => `
- + ${t} `).join('')} - ${supplTotal > 0 ? `
- Format Maxi : +${formatPrice(supplTotal)} ` : ''} -
- })
-
-
-
- `;
-
- // Bouton "i" allergenes (modale generale) dans le bloc info de la fiche.
- // Echec de chargement non bloquant : la fiche reste fonctionnelle.
- try {
- const allergens = await loadAllergens();
- const info = container.querySelector('.product-detail__info');
- if (info) {
- info.appendChild(buildAllergenInfoButton(() => openAllergenModal(allergens)));
- }
- } catch (e) {
- console.error('loadAllergens error:', e);
- }
-
- document.getElementById('add-to-cart-btn').addEventListener('click', () => {
- addToCart({
- id: product.id,
- type: product.type,
- categorie: product.categorie ?? categorySlug,
- libelle: product.nom,
- prix_cents: product.prix,
- quantite: 1,
- image: product.image
- });
- refreshCartBadge();
-
- const btn = document.getElementById('add-to-cart-btn');
- btn.textContent = 'Ajoute !';
- btn.disabled = true;
-
- /* Redirect after brief confirmation pause */
- setTimeout(() => {
- window.location.href = `products.html?category=${categorySlug}`;
- }, 1000);
- });
-
- } catch (err) {
- showError('Erreur lors du chargement du produit.');
- console.error('renderProduct error:', err);
- }
-}
-
-function showError(msg) {
- if (errorBlock) {
- errorBlock.hidden = false;
- errorBlock.textContent = msg;
- }
- if (container) {
- container.hidden = true;
- }
-}
-
-document.addEventListener('DOMContentLoaded', renderProduct);
diff --git a/src/public/borne/assets/js/page-products.js b/src/public/borne/assets/js/page-products.js
index bffe0db..c352b71 100644
--- a/src/public/borne/assets/js/page-products.js
+++ b/src/public/borne/assets/js/page-products.js
@@ -3,7 +3,8 @@
*
* Reads ?category=${escHtml(product.nom)}
-${formatPrice(product.prix)}
- -
- Sur place
-
-
-
- 0
- Panier
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/src/public/borne/products.html b/src/public/borne/products.html
index 51de3df..7594f6a 100644
--- a/src/public/borne/products.html
+++ b/src/public/borne/products.html
@@ -33,15 +33,6 @@
src="assets/images/ui/logo.png"
alt="Wakdo"
>
-
-
- 0
- Panier
-
-
-
-
-
-
diff --git a/tests/e2e/borne.spec.js b/tests/e2e/borne.spec.js
index cd48177..1ab6f27 100644
--- a/tests/e2e/borne.spec.js
+++ b/tests/e2e/borne.spec.js
@@ -1,6 +1,8 @@
-// Parcours E2E borne : welcome -> categories -> produit -> ajout panier -> panier
-// -> paiement -> confirmation. La stack est montee a part (run.sh) ; le panier vit
-// dans localStorage (meme origine), donc on peut naviguer par goto sans perdre l'etat.
+// Parcours E2E borne : welcome -> categories -> produits (grille) -> modale d'options
+// au clic produit -> ajout -> le panneau de commande persistant (unique vue panier)
+// reflete la ligne -> paiement -> confirmation. La stack est montee a part (run.sh) ;
+// le panier vit dans localStorage (meme origine), on navigue sans perdre l'etat.
+// Il n'existe plus de page panier ni de page produit separees (lot F3 panier unique).
const { test, expect } = require('@playwright/test');
test('parcours borne : de l\'accueil a la confirmation de commande', async ({ page }) => {
@@ -16,40 +18,46 @@ test('parcours borne : de l\'accueil a la confirmation de commande', async ({ pa
await test.step('categories -> produits', async () => {
await expect(page.locator('h1.categories-main__heading')).toBeVisible();
- // Categorie 2 = boissons : produits SIMPLES (la categorie 1 = menus, qui rendent
- // un autre gabarit a slots, sans bouton d'ajout direct).
+ // Categorie 2 = boissons : produits SIMPLES (la categorie 1 = menus, qui ouvrent
+ // le composeur a slots, un autre parcours). Un produit simple ouvre la modale options.
await page.locator('a[href="products.html?category=2"]').click();
await expect(page).toHaveURL(/products\.html\?category=2/);
});
- await test.step('produits -> fiche produit', async () => {
- // Cartes rendues par JS depuis le JSON : auto-wait sur la 1re carte.
- const firstCard = page.locator('#products-grid a.product-card').first();
+ await test.step('clic produit -> modale options', async () => {
+ // Cartes rendues par JS depuis le JSON : auto-wait sur la 1re carte commandable.
+ const firstCard = page.locator('#products-grid a.product-card:not(.product-card--unavailable)').first();
await expect(firstCard).toBeVisible();
await firstCard.click();
- await expect(page).toHaveURL(/product\.html\?id=/);
+ // product-options.js monte une modale (.composer-overlay) avec le bouton d'ajout #po-add.
+ await expect(page.locator('.composer-overlay [role="dialog"]')).toBeVisible();
+ await expect(page.locator('#po-add')).toBeVisible();
});
- await test.step('ajout au panier', async () => {
- const addBtn = page.locator('#add-to-cart-btn');
- await expect(addBtn).toBeVisible();
- await addBtn.click();
- // Feedback visuel "Ajoute !" (page-product.js) ; l'ecriture localStorage est synchrone.
- await expect(addBtn).toHaveText(/Ajoute/);
+ await test.step('ajout -> le panneau de commande reflete la ligne', async () => {
+ await page.locator('#po-add').click();
+ // La modale se ferme et le panneau persistant (unique vue panier) montre la ligne.
+ await expect(page.locator('.composer-overlay')).toHaveCount(0);
+ const panel = page.locator('[data-order-panel]');
+ await expect(panel.locator('.order-panel__line')).toHaveCount(1);
+ // Total calcule (le panneau affiche un montant, plus le placeholder vide).
+ await expect(panel.locator('.order-panel__total-value')).not.toHaveText('');
});
- await test.step('panier : recapitulatif', async () => {
- await page.goto('/cart.html');
- await expect(page.locator('#cart-summary')).toBeVisible();
- await expect(page.locator('#cart-list li')).toHaveCount(1);
- // Total calcule, plus le placeholder "—".
- await expect(page.locator('#total-ttc')).not.toHaveText('—');
- await page.locator('#pay-btn').click();
+ await test.step('panneau Payer -> paiement', async () => {
+ const payLink = page.locator('[data-order-panel] .order-panel__pay');
+ await expect(payLink).toHaveAttribute('aria-disabled', 'false');
+ await payLink.click();
await expect(page).toHaveURL(/payment\.html/);
});
await test.step('paiement -> confirmation', async () => {
await page.locator('#pay-card').click();
+ // Sur-place : page-payment.js ouvre la modale chevalet (numero de table) avant de
+ // soumettre. On saisit un numero puis on enregistre pour declencher le checkout.
+ await expect(page.locator('#chevalet-input')).toBeVisible();
+ await page.locator('#chevalet-input').fill('12');
+ await page.locator('#chevalet-ok').click();
await expect(page).toHaveURL(/confirmation\.html/);
await expect(page.locator('.confirmation-banner__title')).toHaveText(/Commande confirmee/);
// Numero de commande genere (plus le placeholder).
diff --git a/tests/js/composer-slots.test.js b/tests/js/composer-slots.test.js
index c3315d5..27927ad 100644
--- a/tests/js/composer-slots.test.js
+++ b/tests/js/composer-slots.test.js
@@ -12,7 +12,7 @@ import { JSDOM } from 'jsdom';
let buildComposerSteps, buildMenuCartItem, selectionsComplete, composerIsViable, optionLabel;
before(async () => {
- const dom = new JSDOM('', { url: 'https://kiosk.test/product.html' });
+ const dom = new JSDOM('', { url: 'https://kiosk.test/products.html' });
global.window = dom.window;
global.document = dom.window.document;
global.localStorage = dom.window.localStorage;
diff --git a/tests/js/nav.test.js b/tests/js/nav.test.js
index eaca4df..18cbb73 100644
--- a/tests/js/nav.test.js
+++ b/tests/js/nav.test.js
@@ -27,7 +27,7 @@ test('modeLabel: libelle humain ; vide si mode absent ou inconnu (ne ment pas)',
test('needsModeRedirect: page profonde SANS mode valide -> redirige', () => {
assert.equal(needsModeRedirect('/payment.html', null), true);
assert.equal(needsModeRedirect('/products.html', undefined), true);
- assert.equal(needsModeRedirect('/cart.html', 'bidon'), true);
+ assert.equal(needsModeRedirect('/payment.html', 'bidon'), true);
assert.equal(needsModeRedirect('/categories.html', ''), true);
});
diff --git a/tests/js/order-panel.test.js b/tests/js/order-panel.test.js
index c60217e..a71178c 100644
--- a/tests/js/order-panel.test.js
+++ b/tests/js/order-panel.test.js
@@ -138,6 +138,24 @@ test('renderOrderPanel: clic corbeille retire la ligne et re-rend', () => {
assert.equal(JSON.parse(localStorage.getItem('wakdo_cart')).length, 1);
});
+test('renderOrderPanel: stepper + augmente la quantite et re-rend', () => {
+ localStorage.setItem('wakdo_cart', JSON.stringify([simple({ quantite: 1 })]));
+ const el = document.createElement('aside');
+ renderOrderPanel(el);
+ el.querySelector('.order-panel__qty-btn[data-action="inc"]').click();
+ assert.equal(JSON.parse(localStorage.getItem('wakdo_cart'))[0].quantite, 2);
+ assert.equal(el.querySelector('.order-panel__qty-value').textContent, '2');
+});
+
+test('renderOrderPanel: stepper - a quantite 1 retire la ligne', () => {
+ localStorage.setItem('wakdo_cart', JSON.stringify([simple({ quantite: 1 }), menu()]));
+ const el = document.createElement('aside');
+ renderOrderPanel(el);
+ el.querySelector('.order-panel__qty-btn[data-action="dec"]').click(); // 1re ligne 1 -> 0 -> retiree
+ assert.equal(el.querySelectorAll('.order-panel__line').length, 1);
+ assert.equal(JSON.parse(localStorage.getItem('wakdo_cart')).length, 1);
+});
+
test('renderOrderPanel: libelle de ligne echappe (anti-XSS RG-T15)', () => {
localStorage.setItem('wakdo_cart', JSON.stringify([simple({ libelle: '
' })]));
const el = document.createElement('aside');