86 lines
3 KiB
JavaScript
86 lines
3 KiB
JavaScript
import React, { useState } from 'react';
|
||
import { api } from '../stores/api';
|
||
import PageHeader from '../components/PageHeader';
|
||
|
||
export default function InviterMembre() {
|
||
const [code, setCode] = useState(null);
|
||
const [expiration, setExpiration] = useState(null);
|
||
const [loading, setLoading] = useState(false);
|
||
const [copied, setCopied] = useState(false);
|
||
|
||
const generer = async () => {
|
||
setLoading(true);
|
||
try {
|
||
const data = await api.post('/invitations/');
|
||
setCode(data.code);
|
||
setExpiration(new Date(data.expire_le).toLocaleString('fr-CA'));
|
||
} catch (e) {
|
||
alert(e.message);
|
||
}
|
||
setLoading(false);
|
||
};
|
||
|
||
const copier = () => {
|
||
navigator.clipboard.writeText(code).then(() => {
|
||
setCopied(true);
|
||
setTimeout(() => setCopied(false), 2000);
|
||
});
|
||
};
|
||
|
||
const partagerSMS = () => {
|
||
const msg = `Rejoins le Groupe Méditation sur l'app ! Ton code d'invitation : ${code} (expire dans 48h)`;
|
||
window.open(`sms:?body=${encodeURIComponent(msg)}`);
|
||
};
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-100">
|
||
<PageHeader titre="Inviter un membre" sousTitre="G1 — Code d'invitation 48h" />
|
||
|
||
<div className="p-4 space-y-4">
|
||
{!code ? (
|
||
<div className="text-center py-12">
|
||
<p className="text-5xl mb-4">➕</p>
|
||
<p className="text-gray-600 mb-2">Générer un code d'invitation</p>
|
||
<p className="text-gray-400 text-sm mb-6">Le code expire après 48 heures et ne peut être utilisé qu'une fois</p>
|
||
<button
|
||
onClick={generer}
|
||
disabled={loading}
|
||
className="px-8 py-4 bg-green-600 text-white rounded-2xl text-lg font-bold active:scale-[0.97] transition shadow-lg"
|
||
>
|
||
{loading ? '...' : 'Générer le code'}
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<div className="space-y-4">
|
||
<div className="bg-white rounded-2xl p-6 shadow-sm text-center">
|
||
<p className="text-xs text-gray-400 mb-2">Code d'invitation</p>
|
||
<p className="text-3xl font-mono font-bold tracking-widest text-aa-blue">{code}</p>
|
||
<p className="text-xs text-gray-400 mt-3">Expire le {expiration}</p>
|
||
</div>
|
||
|
||
<button
|
||
onClick={copier}
|
||
className="w-full p-4 bg-aa-blue text-white rounded-2xl font-bold active:scale-[0.97] transition"
|
||
>
|
||
{copied ? '✓ Copié !' : '📋 Copier le code'}
|
||
</button>
|
||
|
||
<button
|
||
onClick={partagerSMS}
|
||
className="w-full p-4 bg-green-600 text-white rounded-2xl font-bold active:scale-[0.97] transition"
|
||
>
|
||
💬 Partager par SMS
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => { setCode(null); setExpiration(null); }}
|
||
className="w-full p-3 text-gray-500 text-sm"
|
||
>
|
||
Générer un autre code
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|