Initial commit
This commit is contained in:
Olivier CROGUENNEC
@@ -0,0 +1,188 @@
|
||||
import { useState } from 'react';
|
||||
import { useLocation, useNavigate } from 'react-router-dom';
|
||||
|
||||
/* ── Accordéon FAQ ───────────────────────────────────────────── */
|
||||
function FaqItem({ question, children }) {
|
||||
const [open, setOpen] = useState(false);
|
||||
return (
|
||||
<div style={{
|
||||
borderBottom: '1px solid var(--border)',
|
||||
padding: '0',
|
||||
}}>
|
||||
<button
|
||||
onClick={() => setOpen(o => !o)}
|
||||
style={{
|
||||
width: '100%', textAlign: 'left', background: 'none', border: 'none',
|
||||
padding: '14px 0', cursor: 'pointer', display: 'flex',
|
||||
alignItems: 'center', justifyContent: 'space-between', gap: 12,
|
||||
color: 'var(--text)', fontSize: 'var(--fs-base)', fontWeight: 500,
|
||||
}}
|
||||
>
|
||||
<span>{question}</span>
|
||||
<svg
|
||||
width="16" height="16" viewBox="0 0 24 24" fill="none"
|
||||
stroke="currentColor" strokeWidth="2.2" strokeLinecap="round" strokeLinejoin="round"
|
||||
style={{ flexShrink: 0, transform: open ? 'rotate(180deg)' : 'none', transition: 'transform .2s' }}
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9" />
|
||||
</svg>
|
||||
</button>
|
||||
{open && (
|
||||
<div style={{
|
||||
paddingBottom: 16, color: 'var(--text-muted)',
|
||||
fontSize: 'var(--fs-sm)', lineHeight: 1.7,
|
||||
}}>
|
||||
{children}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/* ── Navigation ─────────────────────────────────────────────── */
|
||||
const NAV = [
|
||||
{
|
||||
id: 'faq',
|
||||
label: 'FAQ',
|
||||
icon: (
|
||||
<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||||
strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
||||
<circle cx="12" cy="12" r="10" />
|
||||
<path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3" />
|
||||
<line x1="12" y1="17" x2="12.01" y2="17" />
|
||||
</svg>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
/* ── Page principale ─────────────────────────────────────────── */
|
||||
export default function Aide() {
|
||||
const { search } = useLocation();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const section = new URLSearchParams(search).get('section') || 'faq';
|
||||
const setSection = (s) => navigate(`/aide?section=${s}`, { replace: true });
|
||||
|
||||
return (
|
||||
<div className="account-layout">
|
||||
|
||||
{/* ── Nav gauche ───────────────────────────────────────── */}
|
||||
<aside className="account-sidebar">
|
||||
<h1 className="account-title">Centre d'aide</h1>
|
||||
{NAV.map(item => (
|
||||
<button
|
||||
key={item.id}
|
||||
className={`account-nav-item${section === item.id ? ' active' : ''}`}
|
||||
onClick={() => setSection(item.id)}
|
||||
>
|
||||
{item.icon}
|
||||
{item.label}
|
||||
</button>
|
||||
))}
|
||||
</aside>
|
||||
|
||||
{/* ── Contenu ──────────────────────────────────────────── */}
|
||||
<div className="account-content">
|
||||
|
||||
{section === 'faq' && (
|
||||
<div>
|
||||
<h2 style={{ marginTop: 0, marginBottom: 24 }}>Questions fréquentes</h2>
|
||||
|
||||
<FaqItem question="Comment est calculé le solde du porte-monnaie d'une plateforme ?">
|
||||
<p style={{ marginTop: 0 }}>
|
||||
Le solde du porte-monnaie représente les liquidités disponibles sur une plateforme,
|
||||
c'est-à-dire l'argent que vous pouvez retirer ou réinvestir. Il est calculé comme suit :
|
||||
</p>
|
||||
|
||||
<div style={{ margin: '12px 0', padding: '12px 16px', background: 'var(--surface-2)', borderRadius: 8, fontFamily: 'monospace', fontSize: 'var(--fs-sm)', color: 'var(--text)', lineHeight: 2 }}>
|
||||
Solde = Dépôts<br />
|
||||
− Retraits manuels<br />
|
||||
+ Remboursements crédités au porte-monnaie<br />
|
||||
+ Bonus (parrainage / plateforme)<br />
|
||||
− Capital investi (en cours ou remboursé)<br />
|
||||
+ Corrections de solde
|
||||
</div>
|
||||
|
||||
<p><strong style={{ color: 'var(--text)' }}>Retraits manuels</strong> — seuls les retraits que vous avez saisis manuellement sont déduits.
|
||||
Les retraits générés automatiquement lors d'un remboursement en mode "compte courant" sont exclus,
|
||||
car ils ne représentent pas un vrai mouvement de porte-monnaie.</p>
|
||||
|
||||
<p><strong style={{ color: 'var(--text)' }}>Remboursements crédités au porte-monnaie</strong> — uniquement les remboursements
|
||||
dont le mode est "Portefeuille" (et non "Compte courant"). Le montant crédité dépend de la fiscalité
|
||||
de la plateforme :</p>
|
||||
<ul style={{ margin: '8px 0 8px 16px', paddingLeft: 0 }}>
|
||||
<li style={{ marginBottom: 6 }}>
|
||||
<strong style={{ color: 'var(--text)' }}>Plateforme française (Flat Tax)</strong> — le porte-monnaie
|
||||
reçoit le <em>net reçu</em>, c'est-à-dire le montant après déduction du PFU français (17,2 % de prélèvements
|
||||
sociaux + 12,8 % d'impôt sur le revenu), prélevé directement à la source par la plateforme.
|
||||
</li>
|
||||
<li style={{ marginBottom: 6 }}>
|
||||
<strong style={{ color: 'var(--text)' }}>Plateforme hors France (sans fiscalité locale)</strong> — le porte-monnaie
|
||||
reçoit le capital remboursé + cashback + intérêts bruts. Le PFU français n'est pas prélevé à la
|
||||
source : vous devez le déclarer séparément dans votre déclaration fiscale annuelle.
|
||||
</li>
|
||||
<li>
|
||||
<strong style={{ color: 'var(--text)' }}>Plateforme hors France (avec retenue à la source locale)</strong> — même
|
||||
principe que ci-dessus, mais la plateforme a déjà prélevé une taxe locale sur les intérêts. Le
|
||||
porte-monnaie reçoit le capital + cashback + intérêts bruts <em>après</em> cette retenue locale.
|
||||
Le PFU français reste à déclarer séparément.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<p><strong style={{ color: 'var(--text)' }}>Capital investi</strong> — le montant que vous avez placé dans des prêts actifs
|
||||
(y compris les réinvestissements complémentaires) est soustrait du porte-monnaie, car ces fonds ne sont
|
||||
plus disponibles. Ils reviennent progressivement via les remboursements.</p>
|
||||
|
||||
<p style={{ marginBottom: 0 }}><strong style={{ color: 'var(--text)' }}>Corrections de solde</strong> — ajustements manuels
|
||||
permettant de réconcilier de micro-écarts de calcul (par exemple un arrondi de centimes sur la fiscalité).</p>
|
||||
</FaqItem>
|
||||
|
||||
<FaqItem question="Comment mettre en place un réinvestissement automatique des intérêts ?">
|
||||
<p style={{ marginTop: 0 }}>
|
||||
Le réinvestissement automatique permet de capitaliser les intérêts perçus après chaque remboursement,
|
||||
sans aucune saisie manuelle. Les intérêts sont automatiquement réinjectés dans le capital du prêt,
|
||||
ce qui augmente progressivement le montant investi et les intérêts futurs.
|
||||
</p>
|
||||
|
||||
<h4 style={{ margin: '16px 0 8px', color: 'var(--text)' }}>Activation</h4>
|
||||
<ol style={{ margin: '0 0 12px 16px', paddingLeft: 0, lineHeight: 1.8 }}>
|
||||
<li>Ouvrez la fiche d'un investissement.</li>
|
||||
<li>Cliquez sur le bouton <strong style={{ color: 'var(--text)' }}>⋮</strong> en haut à droite du bloc <em>Informations du projet</em>, puis choisissez <strong style={{ color: 'var(--text)' }}>Réinvestir</strong>.</li>
|
||||
<li>Dans la modale, sélectionnez l'onglet <strong style={{ color: 'var(--text)' }}>Automatique</strong>.</li>
|
||||
<li>Cliquez sur <strong style={{ color: 'var(--text)' }}>Activer</strong>.</li>
|
||||
</ol>
|
||||
<p>
|
||||
Une fois activé, le bloc <em>Réinvestissements complémentaires</em> apparaît sur la fiche avec
|
||||
un badge <strong style={{ color: 'var(--primary)' }}>auto</strong>, même si aucun remboursement
|
||||
n'a encore eu lieu.
|
||||
</p>
|
||||
|
||||
<h4 style={{ margin: '16px 0 8px', color: 'var(--text)' }}>Quel montant est réinvesti ?</h4>
|
||||
<p>Le montant réinvesti après chaque remboursement dépend de la fiscalité de la plateforme :</p>
|
||||
<ul style={{ margin: '8px 0 12px 16px', paddingLeft: 0, lineHeight: 1.8 }}>
|
||||
<li>
|
||||
<strong style={{ color: 'var(--text)' }}>Plateforme française (Flat Tax)</strong> — les <em>intérêts nets</em> sont réinvestis
|
||||
(après déduction du PFU prélevé à la source). C'est le montant réellement reçu sur votre porte-monnaie.
|
||||
</li>
|
||||
<li>
|
||||
<strong style={{ color: 'var(--text)' }}>Plateforme hors France</strong> — les <em>intérêts bruts</em> sont réinvestis,
|
||||
car aucune retenue n'est effectuée à la source. Pensez à provisionner la fiscalité due lors de votre déclaration annuelle.
|
||||
</li>
|
||||
</ul>
|
||||
<p>Si les intérêts d'un remboursement sont nuls (remboursement de capital seul), aucun réinvestissement n'est créé.</p>
|
||||
|
||||
<h4 style={{ margin: '16px 0 8px', color: 'var(--text)' }}>Désactivation</h4>
|
||||
<p style={{ marginBottom: 0 }}>
|
||||
Pour désactiver le réinvestissement automatique, cliquez sur <strong style={{ color: 'var(--text)' }}>⋮</strong> dans le bloc
|
||||
<em> Informations du projet</em> et choisissez <strong style={{ color: 'var(--text)' }}>Désactiver le réinvestissement auto</strong>.
|
||||
Les réinvestissements déjà créés sont conservés ; les prochains remboursements n'en génèreront plus.
|
||||
</p>
|
||||
</FaqItem>
|
||||
|
||||
</div>
|
||||
)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user