Fonctionnalitees/appliquer promo #9
@@ -1,5 +1,6 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
import { createOrder } from '../api/orders';
|
import { createOrder } from '../api/orders';
|
||||||
|
import { getBookById } from '../api/books';
|
||||||
|
|
||||||
export default function Orders() {
|
export default function Orders() {
|
||||||
const [customerId, setCustomerId] = useState('');
|
const [customerId, setCustomerId] = useState('');
|
||||||
@@ -22,6 +23,10 @@ export default function Orders() {
|
|||||||
setLines((prev) => [...prev, { bookId: '', quantity: 1 }]);
|
setLines((prev) => [...prev, { bookId: '', quantity: 1 }]);
|
||||||
}
|
}
|
||||||
function removeLine(index) {
|
function removeLine(index) {
|
||||||
|
const [promoValid, setPromoValid] = useState(true);
|
||||||
|
const [estimate, setEstimate] = useState(null);
|
||||||
|
const [estimating, setEstimating] = useState(false);
|
||||||
|
const [estimateError, setEstimateError] = useState(null);
|
||||||
setLines((prev) => prev.filter((_, i) => i !== index));
|
setLines((prev) => prev.filter((_, i) => i !== index));
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -65,6 +70,51 @@ export default function Orders() {
|
|||||||
onChange={(e) => handleLineChange(index, 'bookId', e.target.value)} required />
|
onChange={(e) => handleLineChange(index, 'bookId', e.target.value)} required />
|
||||||
<input type="number" placeholder="Quantité" value={line.quantity}
|
<input type="number" placeholder="Quantité" value={line.quantity}
|
||||||
onChange={(e) => handleLineChange(index, 'quantity', e.target.value)} required />
|
onChange={(e) => handleLineChange(index, 'quantity', e.target.value)} required />
|
||||||
|
function validatePromo(code) {
|
||||||
|
if (!code) return true;
|
||||||
|
// simple format: PROMO10 => 10% , PROMO5 => 5%
|
||||||
|
return /^PROMO\d{1,2}$/.test(code);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleEstimate() {
|
||||||
|
setEstimating(true);
|
||||||
|
setEstimate(null);
|
||||||
|
setEstimateError(null);
|
||||||
|
try {
|
||||||
|
const ids = lines.map((l) => Number(l.bookId)).filter((n) => !Number.isNaN(n) && n > 0);
|
||||||
|
if (ids.length === 0) {
|
||||||
|
setEstimateError('Aucun ISBN valide');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const unique = Array.from(new Set(ids));
|
||||||
|
const responses = await Promise.all(unique.map((id) => getBookById(id).then((r) => r.data)));
|
||||||
|
const priceMap = new Map();
|
||||||
|
unique.forEach((id, idx) => priceMap.set(id, responses[idx].prix ?? responses[idx].price ?? 0));
|
||||||
|
|
||||||
|
let total = 0;
|
||||||
|
for (const l of lines) {
|
||||||
|
const id = Number(l.bookId);
|
||||||
|
const qty = Number(l.quantity) || 0;
|
||||||
|
total += (priceMap.get(id) || 0) * qty;
|
||||||
|
}
|
||||||
|
|
||||||
|
let discounted = total;
|
||||||
|
if (promoCode) {
|
||||||
|
const m = promoCode.match(/^PROMO(\d{1,2})$/);
|
||||||
|
if (m) {
|
||||||
|
const pct = Math.max(0, Math.min(100, Number(m[1])));
|
||||||
|
discounted = total * (1 - pct / 100);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
setEstimate({ total, discounted });
|
||||||
|
} catch (err) {
|
||||||
|
setEstimateError('Erreur lors de l\'estimation');
|
||||||
|
console.error(err);
|
||||||
|
} finally {
|
||||||
|
setEstimating(false);
|
||||||
|
}
|
||||||
|
}
|
||||||
{lines.length > 1 && (
|
{lines.length > 1 && (
|
||||||
<button type="button" onClick={() => removeLine(index)}>Retirer</button>
|
<button type="button" onClick={() => removeLine(index)}>Retirer</button>
|
||||||
)}
|
)}
|
||||||
@@ -80,12 +130,26 @@ export default function Orders() {
|
|||||||
|
|
||||||
<h2>Paiement</h2>
|
<h2>Paiement</h2>
|
||||||
<label>Code promo
|
<label>Code promo
|
||||||
<input value={promoCode} onChange={(e) => setPromoCode(e.target.value)} placeholder="Code promo (optionnel)" />
|
<input value={promoCode} onChange={(e) => { setPromoCode(e.target.value); setPromoValid(validatePromo(e.target.value)); }} placeholder="Code promo (optionnel)" />
|
||||||
</label>
|
</label>
|
||||||
|
{!promoValid && <div style={{ color: 'red' }}>Format de code promo invalide (ex: PROMO10)</div>}
|
||||||
<select value={paymentMethod} onChange={(e) => setPaymentMethod(e.target.value)}>
|
<select value={paymentMethod} onChange={(e) => setPaymentMethod(e.target.value)}>
|
||||||
<option value="CREDIT_CARD">Carte bancaire</option>
|
<option value="CREDIT_CARD">Carte bancaire</option>
|
||||||
</select>
|
</select>
|
||||||
|
|
||||||
|
<div style={{ marginTop: 8 }}>
|
||||||
|
<button type="button" onClick={handleEstimate} disabled={estimating}>
|
||||||
|
{estimating ? 'Estimation…' : 'Estimer le total'}
|
||||||
|
</button>
|
||||||
|
{estimateError && <div style={{ color: 'red' }}>{estimateError}</div>}
|
||||||
|
{estimate && (
|
||||||
|
<div>
|
||||||
|
<div>Total estimé : {estimate.total.toFixed(2)} €</div>
|
||||||
|
<div>Après promo : {estimate.discounted.toFixed(2)} €</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
<button type="submit" disabled={submitting}>
|
<button type="submit" disabled={submitting}>
|
||||||
{submitting ? 'Envoi…' : 'Valider la commande'}
|
{submitting ? 'Envoi…' : 'Valider la commande'}
|
||||||
</button>
|
</button>
|
||||||
|
|||||||
Reference in New Issue
Block a user