feat(front): payment selection and order confirmation pages
payment.html - card / cash choice with inline SVG icons; both simulate payment (MVP)
confirmation.html - order number WK-<base36 timestamp>, cart cleared on load,
new-order button resets flow to index.html
This commit is contained in:
Imugiii
parent
c517b16569
commit
0d83512a4f
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