release: dev -> main (P1 conception v0.2 + front P5 + admin shell) #1
3 changed files with 231 additions and 0 deletions
42
src/public/borne/assets/js/page-confirmation.js
Normal file
42
src/public/borne/assets/js/page-confirmation.js
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
/*
|
||||
* page-confirmation.js — Order confirmation screen.
|
||||
*
|
||||
* Generates a short order number: "WK-" + Date.now() encoded in base 36.
|
||||
* This is session-unique and human-readable at the counter.
|
||||
*
|
||||
* Clears the cart on load so that "Nouvelle commande" starts fresh.
|
||||
*/
|
||||
|
||||
import { clearCart, getTotalCents, formatPrice } from './state.js';
|
||||
|
||||
const orderNumberEl = document.getElementById('order-number');
|
||||
const orderTotalEl = document.getElementById('order-total');
|
||||
const newOrderBtn = document.getElementById('new-order-btn');
|
||||
|
||||
function generateOrderNumber() {
|
||||
return 'WK-' + Date.now().toString(36).toUpperCase();
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
/* Capture total before clearing */
|
||||
const totalCents = getTotalCents();
|
||||
|
||||
if (orderTotalEl) {
|
||||
orderTotalEl.textContent = formatPrice(totalCents);
|
||||
}
|
||||
|
||||
if (orderNumberEl) {
|
||||
orderNumberEl.textContent = generateOrderNumber();
|
||||
}
|
||||
|
||||
/* Clear cart immediately — order is confirmed */
|
||||
clearCart();
|
||||
});
|
||||
|
||||
if (newOrderBtn) {
|
||||
newOrderBtn.addEventListener('click', () => {
|
||||
/* clearCart() already called on DOMContentLoaded, but guard anyway */
|
||||
clearCart();
|
||||
window.location.href = 'index.html';
|
||||
});
|
||||
}
|
||||
69
src/public/borne/confirmation.html
Normal file
69
src/public/borne/confirmation.html
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
<meta name="description" content="Wakdo - Commande confirmee">
|
||||
<title>Wakdo - Confirmation</title>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
</head>
|
||||
<body class="confirmation-page">
|
||||
|
||||
<!--
|
||||
confirmation.html — Order confirmed screen.
|
||||
Order number: "WK-" + Date.now().toString(36).toUpperCase()
|
||||
Cart is cleared on page load by page-confirmation.js.
|
||||
-->
|
||||
|
||||
<header class="site-header site-header--minimal">
|
||||
<img
|
||||
class="site-header__logo"
|
||||
src="assets/images/ui/logo.png"
|
||||
alt="Wakdo"
|
||||
>
|
||||
</header>
|
||||
|
||||
<main class="confirmation-main" aria-label="Confirmation de commande">
|
||||
|
||||
<div class="confirmation-banner" role="status" aria-live="polite">
|
||||
|
||||
<!-- Checkmark SVG (inline, no external dependency) -->
|
||||
<svg class="confirmation-banner__check" viewBox="0 0 80 80" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
|
||||
<circle cx="40" cy="40" r="38" fill="#FFC72C"/>
|
||||
<polyline points="22,40 34,54 58,28" fill="none" stroke="#fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
|
||||
<h1 class="confirmation-banner__title">Commande confirmee !</h1>
|
||||
|
||||
<p class="confirmation-banner__sub">Votre commande est en preparation</p>
|
||||
|
||||
<div class="confirmation-banner__number-block">
|
||||
<span class="confirmation-banner__number-label">Votre numero de commande</span>
|
||||
<strong class="confirmation-banner__number" id="order-number" aria-live="polite">—</strong>
|
||||
</div>
|
||||
|
||||
<p class="confirmation-banner__total">
|
||||
Montant regle : <strong id="order-total">—</strong>
|
||||
</p>
|
||||
|
||||
<p class="confirmation-banner__delay">
|
||||
Temps d'attente estime : <strong>5 - 10 minutes</strong>
|
||||
</p>
|
||||
|
||||
</div>
|
||||
|
||||
<button
|
||||
id="new-order-btn"
|
||||
class="btn btn--primary btn--large confirmation-new-order"
|
||||
type="button"
|
||||
aria-label="Demarrer une nouvelle commande"
|
||||
>
|
||||
Nouvelle commande
|
||||
</button>
|
||||
|
||||
</main>
|
||||
|
||||
<script type="module" src="assets/js/page-confirmation.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
120
src/public/borne/payment.html
Normal file
120
src/public/borne/payment.html
Normal file
|
|
@ -0,0 +1,120 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="fr">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<meta name="robots" content="noindex, nofollow">
|
||||
<meta name="description" content="Wakdo - Choisissez votre mode de paiement">
|
||||
<title>Wakdo - Paiement</title>
|
||||
<link rel="stylesheet" href="assets/css/style.css">
|
||||
</head>
|
||||
<body class="payment-page">
|
||||
|
||||
<!--
|
||||
payment.html — Payment method selection.
|
||||
MVP: both buttons simulate payment and redirect to confirmation.html.
|
||||
No real payment integration (kiosk demo — out of scope permanently).
|
||||
-->
|
||||
|
||||
<header class="site-header">
|
||||
<a
|
||||
class="site-header__back"
|
||||
href="cart.html"
|
||||
aria-label="Retour au panier"
|
||||
>
|
||||
← Panier
|
||||
</a>
|
||||
<img
|
||||
class="site-header__logo"
|
||||
src="assets/images/ui/logo.png"
|
||||
alt="Wakdo"
|
||||
>
|
||||
<span class="mode-badge site-header__mode" data-mode-badge aria-label="Mode de consommation">Sur place</span>
|
||||
</header>
|
||||
|
||||
<main class="payment-main" aria-label="Choix du mode de paiement">
|
||||
|
||||
<h1 class="payment-main__heading">Comment souhaitez-vous payer ?</h1>
|
||||
|
||||
<!-- Mini order recap injected by inline script using localStorage -->
|
||||
<div class="payment-recap" id="payment-recap" aria-label="Recapitulatif de commande">
|
||||
<!-- Filled by inline module below -->
|
||||
</div>
|
||||
|
||||
<div class="payment-methods" role="group" aria-label="Modes de paiement">
|
||||
|
||||
<!--
|
||||
Carte bancaire — simulates payment for MVP.
|
||||
Both methods redirect to confirmation.html.
|
||||
-->
|
||||
<button
|
||||
class="payment-choice"
|
||||
id="pay-card"
|
||||
type="button"
|
||||
aria-label="Payer par carte bancaire"
|
||||
>
|
||||
<!-- Card SVG icon (inline, no external dependency) -->
|
||||
<svg class="payment-choice__icon" viewBox="0 0 64 64" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="4" y="14" width="56" height="36" rx="6" ry="6" fill="#FFC72C"/>
|
||||
<rect x="4" y="24" width="56" height="8" fill="#1A1A1A"/>
|
||||
<rect x="12" y="36" width="16" height="6" rx="2" fill="#fff"/>
|
||||
</svg>
|
||||
<span class="payment-choice__label">Carte bancaire</span>
|
||||
</button>
|
||||
|
||||
<!-- Especes -->
|
||||
<button
|
||||
class="payment-choice"
|
||||
id="pay-cash"
|
||||
type="button"
|
||||
aria-label="Payer en especes"
|
||||
>
|
||||
<!-- Cash SVG icon (inline) -->
|
||||
<svg class="payment-choice__icon" viewBox="0 0 64 64" aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="4" y="20" width="56" height="32" rx="4" ry="4" fill="#FFC72C"/>
|
||||
<circle cx="32" cy="36" r="8" fill="#fff"/>
|
||||
<circle cx="32" cy="36" r="4" fill="#FFC72C"/>
|
||||
<rect x="8" y="12" width="48" height="6" rx="2" fill="#E6A800"/>
|
||||
</svg>
|
||||
<span class="payment-choice__label">Especes</span>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
</main>
|
||||
|
||||
<script type="module">
|
||||
import { getTotalCents, formatPrice, getCart } from './assets/js/state.js';
|
||||
import { getMode } from './assets/js/state.js';
|
||||
|
||||
/* Show mini recap */
|
||||
const recap = document.getElementById('payment-recap');
|
||||
const total = getTotalCents();
|
||||
const items = getCart();
|
||||
const mode = getMode() === 'a-emporter' ? 'A emporter' : 'Sur place';
|
||||
|
||||
if (recap) {
|
||||
if (!items.length) {
|
||||
/* Guard: redirect back to cart if somehow empty */
|
||||
window.location.href = 'cart.html';
|
||||
} else {
|
||||
recap.innerHTML = `
|
||||
<p class="payment-recap__mode">${mode}</p>
|
||||
<p class="payment-recap__items">${items.length} article${items.length > 1 ? 's' : ''}</p>
|
||||
<p class="payment-recap__total">Total : <strong>${formatPrice(total)}</strong></p>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
/* Both payment methods redirect to confirmation — MVP simulation */
|
||||
function simulatePay() {
|
||||
window.location.href = 'confirmation.html';
|
||||
}
|
||||
|
||||
document.getElementById('pay-card').addEventListener('click', simulatePay);
|
||||
document.getElementById('pay-cash').addEventListener('click', simulatePay);
|
||||
</script>
|
||||
|
||||
<script type="module" src="assets/js/nav.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Add table
Reference in a new issue