my-library/src/api/customers.js

@@ -7,3 +7,11 @@ export function registerCustomer(customer) {
 export function findCustomerByPhone(phoneNumber) {
   return client.get(`/api/customers/phone/${encodeURIComponent(phoneNumber)}`);
 }
+
+export function addLoyaltyPoints(customerId, points) {
+  return client.post(`/api/customers/${customerId}/loyalty/add`, null, { params: { points } });
+}
+
+export function subtractLoyaltyPoints(customerId, points) {
+  return client.post(`/api/customers/${customerId}/loyalty/subtract`, null, { params: { points } });
+}

my-library/src/pages/Customers.jsx

@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import { registerCustomer, findCustomerByPhone } from '../api/customers';
+import { registerCustomer, findCustomerByPhone, addLoyaltyPoints, subtractLoyaltyPoints } from '../api/customers';
 
 const initialForm = { firstName: '', lastName: '', phoneNumber: '' };
 
@@ -7,6 +7,7 @@ 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;
@@ -44,6 +45,21 @@ export default function Customers() {
         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>
@@ -82,6 +98,9 @@ export default function Customers() {
             <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>