correction syntaxe appliquer promo
This commit is contained in:
AISSI-JUDE-CHRIST
@@ -8,6 +8,10 @@ export default function Orders() {
|
||||
const [address, setAddress] = useState({ street: '', city: '', postalCode: '', country: '' });
|
||||
const [lines, setLines] = useState([{ bookId: '', quantity: 1 }]);
|
||||
const [promoCode, setPromoCode] = useState('');
|
||||
const [promoValid, setPromoValid] = useState(true);
|
||||
const [estimate, setEstimate] = useState(null);
|
||||
const [estimating, setEstimating] = useState(false);
|
||||
const [estimateError, setEstimateError] = useState(null);
|
||||
const [message, setMessage] = useState(null);
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
|
||||
@@ -19,74 +23,37 @@ export default function Orders() {
|
||||
function handleLineChange(index, field, value) {
|
||||
setLines((prev) => prev.map((line, i) => (i === index ? { ...line, [field]: value } : line)));
|
||||
}
|
||||
|
||||
function addLine() {
|
||||
setLines((prev) => [...prev, { bookId: '', quantity: 1 }]);
|
||||
}
|
||||
|
||||
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));
|
||||
}
|
||||
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
setSubmitting(true);
|
||||
setMessage(null);
|
||||
|
||||
const payload = {
|
||||
customerId,
|
||||
paymentMethod,
|
||||
address,
|
||||
orderLineDtos: lines.map((line) => ({
|
||||
bookId: Number(line.bookId),
|
||||
quantity: Number(line.quantity),
|
||||
})),
|
||||
...(promoCode ? { promoCode } : {}),
|
||||
};
|
||||
|
||||
createOrder(payload)
|
||||
.then((response) => setMessage('Commande créée'))
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
setMessage(error.response?.data?.message || 'Erreur lors de la commande.');
|
||||
})
|
||||
.finally(() => setSubmitting(false));
|
||||
}
|
||||
|
||||
return (
|
||||
<main>
|
||||
<h1>Passer une commande</h1>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<label>ID client
|
||||
<input value={customerId} onChange={(e) => setCustomerId(e.target.value)} required />
|
||||
</label>
|
||||
|
||||
<h2>Livres</h2>
|
||||
{lines.map((line, index) => (
|
||||
<div key={index}>
|
||||
<input type="number" placeholder="ISBN du livre" value={line.bookId}
|
||||
onChange={(e) => handleLineChange(index, 'bookId', e.target.value)} required />
|
||||
<input type="number" placeholder="Quantité" value={line.quantity}
|
||||
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);
|
||||
}
|
||||
|
||||
function handlePromoChange(e) {
|
||||
const code = e.target.value;
|
||||
setPromoCode(code);
|
||||
setPromoValid(validatePromo(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);
|
||||
const ids = lines.map((l) => Number(l.bookId)).filter((n) => !isNaN(n) && n > 0);
|
||||
if (ids.length === 0) {
|
||||
setEstimateError('Aucun ISBN valide');
|
||||
setEstimateError('Aucun ISBN valide.');
|
||||
return;
|
||||
}
|
||||
const unique = Array.from(new Set(ids));
|
||||
const unique = [...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));
|
||||
@@ -109,12 +76,53 @@ export default function Orders() {
|
||||
|
||||
setEstimate({ total, discounted });
|
||||
} catch (err) {
|
||||
setEstimateError('Erreur lors de l\'estimation');
|
||||
setEstimateError("Erreur lors de l'estimation.");
|
||||
console.error(err);
|
||||
} finally {
|
||||
setEstimating(false);
|
||||
}
|
||||
}
|
||||
|
||||
function handleSubmit(e) {
|
||||
e.preventDefault();
|
||||
setSubmitting(true);
|
||||
setMessage(null);
|
||||
|
||||
const payload = {
|
||||
customerId,
|
||||
paymentMethod,
|
||||
address,
|
||||
orderLineDtos: lines.map((line) => ({
|
||||
bookId: Number(line.bookId),
|
||||
quantity: Number(line.quantity),
|
||||
})),
|
||||
...(promoCode ? { promoCode } : {}),
|
||||
};
|
||||
|
||||
createOrder(payload)
|
||||
.then(() => setMessage('Commande créée avec succès !'))
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
setMessage(error.response?.data?.message || 'Erreur lors de la commande.');
|
||||
})
|
||||
.finally(() => setSubmitting(false));
|
||||
}
|
||||
|
||||
return (
|
||||
<main>
|
||||
<h1>Passer une commande</h1>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<label>ID client
|
||||
<input value={customerId} onChange={(e) => setCustomerId(e.target.value)} required />
|
||||
</label>
|
||||
|
||||
<h2>Livres</h2>
|
||||
{lines.map((line, index) => (
|
||||
<div key={index} style={{ display: 'flex', gap: '0.5rem', marginBottom: '0.5rem' }}>
|
||||
<input type="number" placeholder="ISBN du livre" value={line.bookId}
|
||||
onChange={(e) => handleLineChange(index, 'bookId', e.target.value)} required />
|
||||
<input type="number" placeholder="Quantité" min="1" value={line.quantity}
|
||||
onChange={(e) => handleLineChange(index, 'quantity', e.target.value)} required />
|
||||
{lines.length > 1 && (
|
||||
<button type="button" onClick={() => removeLine(index)}>Retirer</button>
|
||||
)}
|
||||
@@ -129,32 +137,35 @@ export default function Orders() {
|
||||
<input name="country" placeholder="Pays" value={address.country} onChange={handleAddressChange} required />
|
||||
|
||||
<h2>Paiement</h2>
|
||||
<label>Code promo
|
||||
<input value={promoCode} onChange={(e) => { setPromoCode(e.target.value); setPromoValid(validatePromo(e.target.value)); }} placeholder="Code promo (optionnel)" />
|
||||
<label>Code promo (optionnel)
|
||||
<input value={promoCode} onChange={handlePromoChange} placeholder="ex: PROMO10" />
|
||||
</label>
|
||||
{!promoValid && <div style={{ color: 'red' }}>Format de code promo invalide (ex: PROMO10)</div>}
|
||||
{!promoValid && <p style={{ color: 'red' }}>Format invalide (ex: PROMO10)</p>}
|
||||
|
||||
<select value={paymentMethod} onChange={(e) => setPaymentMethod(e.target.value)}>
|
||||
<option value="CREDIT_CARD">Carte bancaire</option>
|
||||
</select>
|
||||
|
||||
<div style={{ marginTop: 8 }}>
|
||||
<div>
|
||||
<button type="button" onClick={handleEstimate} disabled={estimating}>
|
||||
{estimating ? 'Estimation…' : 'Estimer le total'}
|
||||
</button>
|
||||
{estimateError && <div style={{ color: 'red' }}>{estimateError}</div>}
|
||||
{estimateError && <p style={{ color: 'red' }}>{estimateError}</p>}
|
||||
{estimate && (
|
||||
<div>
|
||||
<div>Total estimé : {estimate.total.toFixed(2)} €</div>
|
||||
<div>Après promo : {estimate.discounted.toFixed(2)} €</div>
|
||||
<p>Total estimé : {estimate.total.toFixed(2)} €</p>
|
||||
{estimate.total !== estimate.discounted && (
|
||||
<p>Après promo : <strong>{estimate.discounted.toFixed(2)} €</strong></p>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button type="submit" disabled={submitting}>
|
||||
<button type="submit" disabled={submitting || !promoValid}>
|
||||
{submitting ? 'Envoi…' : 'Valider la commande'}
|
||||
</button>
|
||||
</form>
|
||||
{message && <p>{message}</p>}
|
||||
{message && <p style={{ color: message.includes('succès') ? 'green' : 'red' }}>{message}</p>}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user