87 lines
3 KiB
React
87 lines
3 KiB
React
|
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>
|
|||
|
|
);
|
|||
|
|
}
|