chore: update

2026-03-11 19:57:34 +01:00
parent f6b3948839
commit 375aa38454
62 changed files with 2714 additions and 1981 deletions
@@ -0,0 +1,137 @@
+import { useState, useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+import Navbar from '../../components/Navbar';
+import { getReferralBalance, isUserAuthenticated } from '../../api/api';
+import './Parrainage.css';
+
+const TELEGRAM_URL = 'https://t.me/';
+
+const steps = [
+    {
+        num: 1,
+        title: 'Parrainez un ami',
+        desc: 'Recommandez nos services à un proche. Il doit nous contacter directement sur Telegram pour s\'inscrire.',
+        icon: '👥',
+    },
+    {
+        num: 2,
+        title: 'Il passe sa 1ère commande',
+        desc: 'Une fois votre ami inscrit et sa première commande validée, signalez-le nous sur Telegram.',
+        icon: '✅',
+    },
+    {
+        num: 3,
+        title: 'Nous créditons votre compte',
+        desc: 'L\'admin vérifie et crédite manuellement votre solde de parrainage. Vous êtes notifié dès que c\'est fait.',
+        icon: '💰',
+    },
+    {
+        num: 4,
+        title: 'Utilisez votre solde',
+        desc: 'Au moment du checkout, choisissez d\'utiliser votre solde ou de le cumuler pour une prochaine commande.',
+        icon: '🛒',
+    },
+];
+
+export default function Parrainage() {
+    const navigate = useNavigate();
+    const [balance, setBalance] = useState<number>(0);
+    const [loading, setLoading] = useState(true);
+
+    useEffect(() => {
+        if (!isUserAuthenticated()) {
+            navigate('/login/client', { replace: true });
+            return;
+        }
+        getReferralBalance().then((res) => {
+            if (res.success) setBalance(res.balance);
+            setLoading(false);
+        });
+    }, [navigate]);
+
+    return (
+        <>
+            <Navbar />
+            <div className="parrainage-container">
+                {/* En-tête */}
+                <div className="parrainage-hero">
+                    <div className="parrainage-hero-icon">🎁</div>
+                    <h1 className="parrainage-title">Programme de Parrainage</h1>
+                    <p className="parrainage-subtitle">
+                        Parrainez vos amis et cumulez du crédit sur votre compte
+                    </p>
+                </div>
+
+                {/* Solde actuel */}
+                <div className="parrainage-balance-card">
+                    <div className="balance-label">Votre solde parrainage</div>
+                    {loading ? (
+                        <div className="balance-loading">Chargement...</div>
+                    ) : (
+                        <div className={`balance-amount ${balance > 0 ? 'has-balance' : ''}`}>
+                            {balance.toFixed(2)} €
+                        </div>
+                    )}
+                    {balance > 0 && (
+                        <p className="balance-hint">
+                            Utilisable au prochain checkout&nbsp;✓
+                        </p>
+                    )}
+                </div>
+
+                {/* Étapes */}
+                <div className="parrainage-steps-section">
+                    <h2 className="parrainage-section-title">Comment ça marche ?</h2>
+                    <div className="parrainage-steps">
+                        {steps.map((step) => (
+                            <div key={step.num} className="step-card">
+                                <div className="step-icon">{step.icon}</div>
+                                <div className="step-num">Étape {step.num}</div>
+                                <h3 className="step-title">{step.title}</h3>
+                                <p className="step-desc">{step.desc}</p>
+                            </div>
+                        ))}
+                    </div>
+                </div>
+
+                {/* Règle zone minimum */}
+                <div className="parrainage-warning-card">
+                    <div className="warning-icon">⚠️</div>
+                    <div className="warning-content">
+                        <h3 className="warning-title">Règle du minimum de zone</h3>
+                        <p className="warning-text">
+                            Même avec un solde parrainage, vous devez atteindre le minimum de
+                            commande de votre zone. Votre crédit couvre la différence mais ne
+                            remplace pas le minimum requis.
+                        </p>
+                        <div className="warning-example">
+                            <span className="example-label">Exemple :</span>
+                            <span>
+                                Solde <strong>50 €</strong> + Zone minimum <strong>50 €</strong>{' '}
+                                → Commande totale minimum <strong>100 €</strong> (vous payez{' '}
+                                <strong>50 €</strong>)
+                            </span>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Bouton Telegram */}
+                <div className="parrainage-cta">
+                    <p className="cta-text">
+                        Prêt à parrainer ? Contactez-nous sur Telegram pour enregistrer votre
+                        filleul.
+                    </p>
+                    <a
+                        href={TELEGRAM_URL}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="telegram-btn"
+                    >
+                        <span className="telegram-icon">✈</span>
+                        Contacter sur Telegram
+                    </a>
+                </div>
+            </div>
+        </>
+    );
+}