chore: update

frontend-prep/src/pages/User/Checkout.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useCart } from '../../context/CartContext';
-import { createCheckout, clearCart, extractUsernameFromToken, isUserAuthenticated } from '../../api/api';
+import { createCheckout, clearCart, extractUsernameFromToken, isUserAuthenticated, getReferralBalance, getPublicSettings } from '../../api/api';
 import type { CheckoutData } from '../../api/api';
 import Navbar from '../../components/Navbar';
 import './Checkout.css';
@@ -23,6 +23,7 @@ interface ConfirmationData {
   delivery_address: string;
   arrivalTime: string;
   total: number;
+  referral_used?: number;
   clientInfo: {
     first_name: string;
     last_name: string;
@@ -49,6 +50,11 @@ function Checkout() {
 
   const total = cartTotal;
 
+  // Parrainage
+  const [referralBalance, setReferralBalance] = useState(0);
+  const [referralEnabled, setReferralEnabled] = useState(false);
+  const [useReferral, setUseReferral] = useState(false);
+
   // ✅ VÉRIFICATION INITIALE DE L'AUTHENTIFICATION
   useEffect(() => {
     const checkAuth = () => {
@@ -73,6 +79,18 @@ function Checkout() {
     return () => clearInterval(authInterval);
   }, [navigate]);
 
+  // Charger solde parrainage si activé
+  useEffect(() => {
+    getPublicSettings().then((settings) => {
+      if (settings.referral_enabled) {
+        setReferralEnabled(true);
+        getReferralBalance().then((res) => {
+          if (res.success) setReferralBalance(res.balance);
+        });
+      }
+    });
+  }, []);
+
   /**
    * ✅ Récupérer le username du JWT
    */
@@ -156,7 +174,8 @@ function Checkout() {
         first_name: firstName,
         last_name: lastName,
         phone,
-        payment_method: 'especes'
+        payment_method: 'especes',
+        use_referral_balance: useReferral && referralBalance > 0,
       };
 
       console.log('📤 Envoi checkout avec JWT username:', checkoutData);
@@ -209,6 +228,7 @@ function Checkout() {
           delivery_address: delivery_address || address,
           arrivalTime,
           total: frontendTotal,
+          referral_used: (response as any).referral_used,
           clientInfo: {
             first_name: firstName,
             last_name: lastName,
@@ -333,6 +353,28 @@ function Checkout() {
               </div>
             </div>
 
+            {/* Toggle parrainage */}
+            {referralEnabled && referralBalance > 0 && (
+              <div className="referral-toggle-box">
+                <div className="referral-toggle-info">
+                  <span className="referral-toggle-icon">🎁</span>
+                  <div>
+                    <p className="referral-toggle-label">Solde parrainage</p>
+                    <p className="referral-toggle-balance">{referralBalance.toFixed(2)} € disponible</p>
+                  </div>
+                </div>
+                <label className="referral-switch">
+                  <input
+                    type="checkbox"
+                    checked={useReferral}
+                    onChange={(e) => setUseReferral(e.target.checked)}
+                    disabled={loading}
+                  />
+                  <span className="referral-switch-slider" />
+                </label>
+              </div>
+            )}
+
             <div className="form-actions">
               <button
                 type="button"
@@ -408,6 +450,19 @@ function Checkout() {
                 </div>
               </div>
 
+              {/* Parrainage utilisé */}
+              {confirmationData.referral_used != null && confirmationData.referral_used > 0 && (
+                <div className="confirmation-section">
+                  <div className="confirmation-section-title">
+                    <i className="fas fa-gift icon"></i>
+                    Parrainage appliqué
+                  </div>
+                  <div className="confirmation-detail">
+                    <strong>Crédit utilisé:</strong> -{confirmationData.referral_used.toFixed(2)} €
+                  </div>
+                </div>
+              )}
+
               {/* Total */}
               <div className="confirmation-total">
                 <div className="confirmation-total-label">