|
|
|
@@ -1,3 +1,91 @@
|
|
|
|
|
import { useState } from 'react';
|
|
|
|
|
import { createOrder } from '../api/orders';
|
|
|
|
|
|
|
|
|
|
export default function Orders() {
|
|
|
|
|
return <main><h1>Mes commandes</h1></main>;
|
|
|
|
|
const [customerId, setCustomerId] = useState('');
|
|
|
|
|
const [paymentMethod, setPaymentMethod] = useState('CREDIT_CARD');
|
|
|
|
|
const [address, setAddress] = useState({ street: '', city: '', postalCode: '', country: '' });
|
|
|
|
|
const [lines, setLines] = useState([{ bookId: '', quantity: 1 }]);
|
|
|
|
|
const [message, setMessage] = useState(null);
|
|
|
|
|
const [submitting, setSubmitting] = useState(false);
|
|
|
|
|
|
|
|
|
|
function handleAddressChange(e) {
|
|
|
|
|
const { name, value } = e.target;
|
|
|
|
|
setAddress((prev) => ({ ...prev, [name]: value }));
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
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) {
|
|
|
|
|
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),
|
|
|
|
|
})),
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
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 />
|
|
|
|
|
{lines.length > 1 && (
|
|
|
|
|
<button type="button" onClick={() => removeLine(index)}>Retirer</button>
|
|
|
|
|
)}
|
|
|
|
|
</div>
|
|
|
|
|
))}
|
|
|
|
|
<button type="button" onClick={addLine}>+ Ajouter un livre</button>
|
|
|
|
|
|
|
|
|
|
<h2>Adresse de livraison</h2>
|
|
|
|
|
<input name="street" placeholder="Rue" value={address.street} onChange={handleAddressChange} required />
|
|
|
|
|
<input name="city" placeholder="Ville" value={address.city} onChange={handleAddressChange} required />
|
|
|
|
|
<input name="postalCode" placeholder="Code postal" value={address.postalCode} onChange={handleAddressChange} required />
|
|
|
|
|
<input name="country" placeholder="Pays" value={address.country} onChange={handleAddressChange} required />
|
|
|
|
|
|
|
|
|
|
<h2>Paiement</h2>
|
|
|
|
|
<select value={paymentMethod} onChange={(e) => setPaymentMethod(e.target.value)}>
|
|
|
|
|
<option value="CREDIT_CARD">Carte bancaire</option>
|
|
|
|
|
</select>
|
|
|
|
|
|
|
|
|
|
<button type="submit" disabled={submitting}>
|
|
|
|
|
{submitting ? 'Envoi…' : 'Valider la commande'}
|
|
|
|
|
</button>
|
|
|
|
|
</form>
|
|
|
|
|
{message && <p>{message}</p>}
|
|
|
|
|
</main>
|
|
|
|
|
);
|
|
|
|
|
}
|