109 lines
3.7 KiB
React
109 lines
3.7 KiB
React
import { useState } from 'react';
|
|
import { registerCustomer, findCustomerByPhone, addLoyaltyPoints, subtractLoyaltyPoints } from '../api/customers';
|
|
|
|
const initialForm = { firstName: '', lastName: '', phoneNumber: '' };
|
|
|
|
export default function Customers() {
|
|
const [form, setForm] = useState(initialForm);
|
|
const [registerMsg, setRegisterMsg] = useState(null);
|
|
const [submitting, setSubmitting] = useState(false);
|
|
const [pointsInput, setPointsInput] = useState('');
|
|
|
|
function handleChange(e) {
|
|
const { name, value } = e.target;
|
|
setForm((prev) => ({ ...prev, [name]: value }));
|
|
}
|
|
|
|
function handleRegister(e) {
|
|
e.preventDefault();
|
|
setSubmitting(true);
|
|
setRegisterMsg(null);
|
|
registerCustomer(form)
|
|
.then((response) => {
|
|
setRegisterMsg(`Client créé (id : ${response.data})`);
|
|
setForm(initialForm);
|
|
})
|
|
.catch((error) => {
|
|
console.error(error);
|
|
setRegisterMsg('Erreur lors de la création du client.');
|
|
})
|
|
.finally(() => setSubmitting(false));
|
|
}
|
|
|
|
const [phone, setPhone] = useState('');
|
|
const [customer, setCustomer] = useState(null);
|
|
const [searchError, setSearchError] = useState(null);
|
|
|
|
function handleSearch(e) {
|
|
e.preventDefault();
|
|
setSearchError(null);
|
|
setCustomer(null);
|
|
findCustomerByPhone(phone)
|
|
.then((response) => setCustomer(response.data))
|
|
.catch((error) => {
|
|
console.error(error);
|
|
setSearchError('Aucun client trouvé avec ce numéro.');
|
|
});
|
|
}
|
|
function applyLoyalty(operation) {
|
|
const points = Number(pointsInput);
|
|
const action = operation === 'add' ? addLoyaltyPoints : subtractLoyaltyPoints;
|
|
|
|
action(customer.id, points)
|
|
.then((response) => {
|
|
setCustomer((prev) => ({ ...prev, loyaltyPoints: response.data }));
|
|
setPointsInput('');
|
|
})
|
|
.catch((error) => {
|
|
console.error(error);
|
|
if (error.response?.status === 400) setSearchError('Pas assez de points pour ce retrait.');
|
|
else setSearchError('Erreur lors de la mise à jour des points.');
|
|
});
|
|
}
|
|
|
|
return (
|
|
<main>
|
|
<h1>Gestion des clients</h1>
|
|
|
|
<section>
|
|
<h2>Enregistrer un client</h2>
|
|
<form onSubmit={handleRegister}>
|
|
<label>Prénom
|
|
<input name="firstName" value={form.firstName} onChange={handleChange} required />
|
|
</label>
|
|
<label>Nom
|
|
<input name="lastName" value={form.lastName} onChange={handleChange} required />
|
|
</label>
|
|
<label>Téléphone
|
|
<input name="phoneNumber" value={form.phoneNumber} onChange={handleChange} required />
|
|
</label>
|
|
<button type="submit" disabled={submitting}>
|
|
{submitting ? 'Envoi…' : 'Créer le client'}
|
|
</button>
|
|
</form>
|
|
{registerMsg && <p>{registerMsg}</p>}
|
|
</section>
|
|
|
|
<section>
|
|
<h2>Rechercher un client</h2>
|
|
<form onSubmit={handleSearch}>
|
|
<label>Téléphone
|
|
<input value={phone} onChange={(e) => setPhone(e.target.value)} required />
|
|
</label>
|
|
<button type="submit">Rechercher</button>
|
|
</form>
|
|
{searchError && <p>{searchError}</p>}
|
|
{customer && (
|
|
<div>
|
|
<p>{customer.firstName} {customer.lastName}</p>
|
|
<p>Téléphone : {customer.phoneNumber}</p>
|
|
<p><strong>Points de fidélité : {customer.loyaltyPoints}</strong></p>
|
|
<input type="number"value={pointsInput}onChange={(e) => setPointsInput(e.target.value)}placeholder="Nombre de points"/>
|
|
<button type="button" onClick={() => applyLoyalty('add')}>Ajouter</button>
|
|
<button type="button" onClick={() => applyLoyalty('subtract')}>Retirer</button>
|
|
</div>
|
|
)}
|
|
</section>
|
|
</main>
|
|
);
|
|
} |