chore: build

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

@@ -28,9 +28,10 @@ export default function ProfilePage() {
   const [signalPseudo, setSignalPseudo]     = useState(() => localStorage.getItem(STORAGE_SIGNAL) ?? '');
 
   // Feedback
-  const [savingContact, setSavingContact]   = useState(false);
-  const [successMsg, setSuccessMsg]         = useState('');
-  const [errorMsg, setErrorMsg]             = useState('');
+  const [savingContact, setSavingContact] = useState(false);
+  const [feedbackModal, setFeedbackModal] = useState<{
+    show: boolean; type: 'success' | 'error'; title: string; body: string;
+  }>({ show: false, type: 'success', title: '', body: '' });
 
   // Telegram
   const [tgLinked, setTgLinked]     = useState(false);
@@ -78,20 +79,13 @@ export default function ProfilePage() {
     });
   }, [navigate]);
 
-  const showSuccess = (msg: string) => {
-    setSuccessMsg(msg);
-    setErrorMsg('');
-    setTimeout(() => setSuccessMsg(''), 3000);
-  };
-  const showError = (msg: string) => {
-    setErrorMsg(msg);
-    setSuccessMsg('');
-    setTimeout(() => setErrorMsg(''), 4000);
+  const showFeedback = (type: 'success' | 'error', title: string, body: string) => {
+    setFeedbackModal({ show: true, type, title, body });
   };
 
   const saveAddress = () => {
     localStorage.setItem(STORAGE_ADDRESS, defaultAddress.trim());
-    showSuccess('Adresse par défaut enregistrée');
+    showFeedback('success', 'Adresse enregistrée', 'Votre adresse par défaut a été sauvegardée et sera pré-remplie à votre prochaine commande.');
   };
 
   const saveLocal = () => {
@@ -99,7 +93,7 @@ export default function ProfilePage() {
     localStorage.setItem(STORAGE_PHONE, defaultPhone.trim());
     localStorage.setItem(STORAGE_SIGNAL, signalPseudo.trim());
     setShowSaveModal(false);
-    showSuccess('Informations par défaut enregistrées');
+    showFeedback('success', 'Infos enregistrées', 'Adresse, téléphone et pseudo Signal sauvegardés. Ils seront pré-remplis à votre prochaine commande.');
   };
 
   const handleLinkTelegram = async () => {
@@ -132,9 +126,9 @@ export default function ProfilePage() {
     setTwoFALoading(false);
     if (res.success) {
       setTwoFAEnabled(newVal);
-      showSuccess(newVal ? 'Double authentification activée' : 'Double authentification désactivée');
+      showFeedback('success', newVal ? '2FA activée' : '2FA désactivée', newVal ? 'La double authentification est maintenant active. Un code vous sera envoyé sur Telegram à chaque connexion.' : 'La double authentification a été désactivée.');
     } else {
-      showError(res.error || 'Erreur lors de la modification');
+      showFeedback('error', 'Erreur', res.error || 'Erreur lors de la modification');
     }
   };
 
@@ -143,9 +137,9 @@ export default function ProfilePage() {
     const res = await updateMyProfile({ nom: nom.trim(), prenom: prenom.trim(), telephone: telephone.trim() });
     setSavingContact(false);
     if (res.success) {
-      showSuccess('Profil mis à jour');
+      showFeedback('success', 'Profil mis à jour', 'Vos informations de compte ont été enregistrées avec succès.');
     } else {
-      showError(res.message ?? 'Erreur lors de la mise à jour');
+      showFeedback('error', 'Erreur', res.message ?? 'Erreur lors de la mise à jour du profil.');
     }
   };
 
@@ -174,17 +168,6 @@ export default function ProfilePage() {
           </div>
         </div>
 
-        {successMsg && (
-          <div className="profile-alert profile-alert--success">
-            <FontAwesomeIcon icon={faCheckCircle} /> {successMsg}
-          </div>
-        )}
-        {errorMsg && (
-          <div className="profile-alert profile-alert--error">
-            <FontAwesomeIcon icon={faExclamationTriangle} /> {errorMsg}
-          </div>
-        )}
-
         {/* Section compte */}
         <div className="profile-card">
           <h2 className="profile-card-title">
@@ -403,6 +386,29 @@ export default function ProfilePage() {
         </div>
       )}
 
+      {feedbackModal.show && (
+        <div className="profile-modal-overlay" onClick={() => setFeedbackModal(m => ({ ...m, show: false }))}>
+          <div className="profile-modal" onClick={(e) => e.stopPropagation()}>
+            <button className="profile-modal-close" onClick={() => setFeedbackModal(m => ({ ...m, show: false }))}>
+              <FontAwesomeIcon icon={faTimes} />
+            </button>
+            <div className={`profile-modal-icon ${feedbackModal.type === 'error' ? 'profile-modal-icon--danger' : 'profile-modal-icon--success'}`}>
+              <FontAwesomeIcon icon={feedbackModal.type === 'error' ? faExclamationTriangle : faCheckCircle} />
+            </div>
+            <h3 className="profile-modal-title">{feedbackModal.title}</h3>
+            <p className="profile-modal-body">{feedbackModal.body}</p>
+            <div className="profile-modal-actions">
+              <button
+                className={`profile-modal-btn ${feedbackModal.type === 'error' ? 'profile-modal-btn--danger' : 'profile-modal-btn--confirm'}`}
+                onClick={() => setFeedbackModal(m => ({ ...m, show: false }))}
+              >
+                <FontAwesomeIcon icon={faCheckCircle} /> Fermer
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
+
       {showUnlinkSuccessModal && (
         <div className="profile-modal-overlay" onClick={() => setShowUnlinkSuccessModal(false)}>
           <div className="profile-modal" onClick={(e) => e.stopPropagation()}>