497c27c7f1
The group creation button should be enabled when the user has a connected WhatsApp instance. The code was updated to check if the user's instance is connected.
321 lines
12 KiB
TypeScript
321 lines
12 KiB
TypeScript
|
||
import { useState, useEffect } from 'react';
|
||
import { Button } from '@/components/ui/button';
|
||
import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
|
||
import { Input } from '@/components/ui/input';
|
||
import { Label } from '@/components/ui/label';
|
||
import { Loader2, Plus, AlertCircle } from 'lucide-react';
|
||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
||
import { findOrCreateWhatsAppGroup } from '@/services/whatsAppGroupsService';
|
||
import { getUserWhatsAppInstance } from '@/services/whatsAppInstanceService';
|
||
import { createWhatsAppGroup, updateGroupRemoteJid } from '@/services/whatsAppGroupCreationService';
|
||
import { useToast } from '@/hooks/use-toast';
|
||
|
||
interface CreateGroupFormProps {
|
||
userEmail: string;
|
||
onSuccess: () => void;
|
||
}
|
||
|
||
const CreateGroupForm = ({ userEmail, onSuccess }: CreateGroupFormProps) => {
|
||
const { toast } = useToast();
|
||
const [cadastrando, setCadastrando] = useState<boolean>(false);
|
||
const [nomeGrupo, setNomeGrupo] = useState<string>('');
|
||
const [hasWhatsAppInstance, setHasWhatsAppInstance] = useState<boolean>(false);
|
||
const [checkingInstance, setCheckingInstance] = useState<boolean>(true);
|
||
const [userInstance, setUserInstance] = useState<{
|
||
instancia_zap: string | null;
|
||
status_instancia: string | null;
|
||
whatsapp: string | null;
|
||
} | null>(null);
|
||
|
||
// Verificar se o usuário tem instância WhatsApp CONECTADA
|
||
useEffect(() => {
|
||
const checkUserInstance = async () => {
|
||
if (!userEmail) {
|
||
console.log('Email do usuário não fornecido');
|
||
setCheckingInstance(false);
|
||
return;
|
||
}
|
||
|
||
setCheckingInstance(true);
|
||
try {
|
||
console.log('=== VERIFICAÇÃO DE INSTÂNCIA ===');
|
||
console.log('Verificando instância para o usuário:', userEmail);
|
||
|
||
const instanceData = await getUserWhatsAppInstance(userEmail);
|
||
console.log('=== DADOS DA INSTÂNCIA RETORNADOS ===');
|
||
console.log('Dados completos:', JSON.stringify(instanceData, null, 2));
|
||
|
||
if (instanceData) {
|
||
console.log('=== VERIFICAÇÃO DETALHADA ===');
|
||
console.log('instancia_zap existe?', !!instanceData.instancia_zap);
|
||
console.log('instancia_zap valor:', instanceData.instancia_zap);
|
||
console.log('instancia_zap não é vazio?', instanceData.instancia_zap?.trim() !== '');
|
||
console.log('status_instancia valor:', instanceData.status_instancia);
|
||
console.log('status_instancia é "conectado"?', instanceData.status_instancia === 'conectado');
|
||
}
|
||
|
||
// LÓGICA CORRETA: Verificar se tem instância E se está conectada
|
||
const hasValidInstance = !!(
|
||
instanceData &&
|
||
instanceData.instancia_zap &&
|
||
instanceData.instancia_zap.trim() !== '' &&
|
||
instanceData.status_instancia === 'conectado' // DEVE ESTAR CONECTADO
|
||
);
|
||
|
||
console.log('=== RESULTADO DA VALIDAÇÃO ===');
|
||
console.log('hasValidInstance:', hasValidInstance);
|
||
|
||
if (hasValidInstance) {
|
||
setHasWhatsAppInstance(true);
|
||
setUserInstance(instanceData);
|
||
console.log('✅ Usuário tem instância WhatsApp conectada - liberando cadastro de grupo');
|
||
} else {
|
||
setHasWhatsAppInstance(false);
|
||
setUserInstance(instanceData);
|
||
console.log('❌ Usuário não tem instância conectada:', {
|
||
instancia_zap: instanceData?.instancia_zap,
|
||
status_instancia: instanceData?.status_instancia
|
||
});
|
||
}
|
||
} catch (error) {
|
||
console.error('Erro ao verificar instância do usuário:', error);
|
||
setHasWhatsAppInstance(false);
|
||
setUserInstance(null);
|
||
} finally {
|
||
setCheckingInstance(false);
|
||
}
|
||
};
|
||
|
||
checkUserInstance();
|
||
}, [userEmail]);
|
||
|
||
// Cadastrar novo grupo
|
||
const handleCadastrarGrupo = async () => {
|
||
if (!userEmail) {
|
||
toast({
|
||
title: 'Erro',
|
||
description: 'Você precisa estar logado para cadastrar um grupo',
|
||
variant: 'destructive',
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!nomeGrupo.trim()) {
|
||
toast({
|
||
title: 'Atenção',
|
||
description: 'Digite um nome para o grupo',
|
||
variant: 'destructive',
|
||
});
|
||
return;
|
||
}
|
||
|
||
if (!userInstance || !userInstance.instancia_zap || userInstance.status_instancia !== 'conectado') {
|
||
toast({
|
||
title: 'Erro',
|
||
description: 'Instância WhatsApp não está conectada',
|
||
variant: 'destructive',
|
||
});
|
||
return;
|
||
}
|
||
|
||
setCadastrando(true);
|
||
try {
|
||
console.log("Iniciando processo de cadastro de grupo...");
|
||
|
||
// 1. Cadastrar grupo no banco de dados local
|
||
const grupo = await findOrCreateWhatsAppGroup(nomeGrupo.trim());
|
||
|
||
if (!grupo) {
|
||
throw new Error('Não foi possível cadastrar o grupo no banco de dados');
|
||
}
|
||
|
||
// 2. Criar grupo no WhatsApp via API
|
||
try {
|
||
const groupResponse = await createWhatsAppGroup(
|
||
userInstance.instancia_zap,
|
||
userEmail,
|
||
userInstance.whatsapp || ''
|
||
);
|
||
|
||
console.log('Resposta da criação do grupo:', groupResponse);
|
||
|
||
// 3. Atualizar remote_jid no banco de dados
|
||
if (groupResponse.id) {
|
||
await updateGroupRemoteJid(grupo.id, groupResponse.id);
|
||
|
||
toast({
|
||
title: 'Sucesso!',
|
||
description: `Grupo "${groupResponse.subject}" criado com sucesso no seu WhatsApp!`,
|
||
variant: 'default',
|
||
});
|
||
} else {
|
||
toast({
|
||
title: 'Atenção',
|
||
description: 'Grupo cadastrado no sistema, mas não foi possível criar no WhatsApp',
|
||
variant: 'destructive',
|
||
});
|
||
}
|
||
|
||
} catch (apiError) {
|
||
console.error('Erro ao criar grupo via API:', apiError);
|
||
toast({
|
||
title: 'Atenção',
|
||
description: 'Grupo cadastrado no sistema, mas houve erro ao criar no WhatsApp. Verifique sua conexão.',
|
||
variant: 'destructive',
|
||
});
|
||
}
|
||
|
||
// Resetar o campo de nome
|
||
setNomeGrupo('');
|
||
|
||
// Atualizar a lista de grupos
|
||
onSuccess();
|
||
|
||
} catch (error) {
|
||
console.error('Erro ao cadastrar grupo:', error);
|
||
let errorMsg = 'Erro desconhecido';
|
||
if (error instanceof Error) {
|
||
errorMsg = error.message;
|
||
}
|
||
|
||
toast({
|
||
title: 'Erro',
|
||
description: `Não foi possível registrar o grupo: ${errorMsg}`,
|
||
variant: 'destructive',
|
||
});
|
||
} finally {
|
||
setCadastrando(false);
|
||
}
|
||
};
|
||
|
||
if (checkingInstance) {
|
||
return (
|
||
<Card>
|
||
<CardContent className="flex items-center justify-center py-8">
|
||
<Loader2 className="h-6 w-6 animate-spin mr-2" />
|
||
<span>Verificando instância WhatsApp...</span>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
if (!hasWhatsAppInstance) {
|
||
return (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>Cadastrar novo grupo</CardTitle>
|
||
<CardDescription>
|
||
Para criar um grupo é necessário ter uma instância do WhatsApp conectada
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent>
|
||
<Alert>
|
||
<AlertCircle className="h-4 w-4" />
|
||
<AlertDescription>
|
||
Para criar um grupo é necessário ter sua instância do WhatsApp conectada.
|
||
Acesse o menu "Conectar WhatsApp" e realize a conexão primeiro.
|
||
</AlertDescription>
|
||
</Alert>
|
||
|
||
{/* Informações de debug DETALHADAS */}
|
||
<div className="mt-4 p-4 bg-gray-100 rounded text-sm">
|
||
<p><strong>📊 STATUS DETALHADO DA INSTÂNCIA:</strong></p>
|
||
<div className="mt-2 space-y-1">
|
||
<p><strong>Email consultado:</strong> {userEmail || 'Não definido'}</p>
|
||
<p><strong>instancia_zap:</strong>
|
||
<span className={instanceData?.instancia_zap ? 'text-green-600' : 'text-red-600'}>
|
||
{instanceData?.instancia_zap || 'NULL/Vazio'}
|
||
</span>
|
||
</p>
|
||
<p><strong>status_instancia:</strong>
|
||
<span className={instanceData?.status_instancia === 'conectado' ? 'text-green-600' : 'text-red-600'}>
|
||
{instanceData?.status_instancia || 'NULL/Vazio'}
|
||
</span>
|
||
</p>
|
||
<p><strong>whatsapp:</strong> {instanceData?.whatsapp || 'NULL/Vazio'}</p>
|
||
|
||
<div className="mt-3 p-2 bg-yellow-100 rounded">
|
||
<p><strong>🔍 VALIDAÇÕES:</strong></p>
|
||
<p>✓ Instância existe? {instanceData ? '✅ SIM' : '❌ NÃO'}</p>
|
||
<p>✓ instancia_zap preenchida? {(instanceData?.instancia_zap && instanceData.instancia_zap.trim() !== '') ? '✅ SIM' : '❌ NÃO'}</p>
|
||
<p>✓ Status é "conectado"? {instanceData?.status_instancia === 'conectado' ? '✅ SIM' : '❌ NÃO'}</p>
|
||
</div>
|
||
|
||
{instanceData?.instancia_zap && instanceData?.status_instancia !== 'conectado' && (
|
||
<p className="text-red-600 font-medium mt-2">
|
||
⚠️ Instância encontrada, mas não está conectada. Status atual: "{instanceData.status_instancia}"
|
||
</p>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<Card>
|
||
<CardHeader>
|
||
<CardTitle>Cadastrar novo grupo</CardTitle>
|
||
<CardDescription>
|
||
Preencha as informações abaixo para cadastrar um novo grupo do WhatsApp
|
||
</CardDescription>
|
||
</CardHeader>
|
||
<CardContent className="space-y-4">
|
||
{/* Mostrar informações da instância conectada */}
|
||
<div className="bg-green-50 border border-green-200 rounded p-3 text-sm">
|
||
<p className="text-green-800">
|
||
<strong>✓ Instância conectada:</strong> {userInstance?.instancia_zap}
|
||
</p>
|
||
<p className="text-green-700">
|
||
Status: {userInstance?.status_instancia}
|
||
</p>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<Label htmlFor="nomeGrupo">Nome do grupo</Label>
|
||
<Input
|
||
id="nomeGrupo"
|
||
placeholder="Ex: Controle de Gastos da Família"
|
||
value={nomeGrupo}
|
||
onChange={(e) => setNomeGrupo(e.target.value)}
|
||
/>
|
||
<p className="text-sm text-muted-foreground">
|
||
Digite um nome descritivo para o grupo que você irá criar
|
||
</p>
|
||
</div>
|
||
|
||
<Button
|
||
onClick={handleCadastrarGrupo}
|
||
disabled={cadastrando || !userEmail || !nomeGrupo.trim() || !hasWhatsAppInstance}
|
||
className="w-full"
|
||
>
|
||
{cadastrando ? (
|
||
<>
|
||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||
Cadastrando...
|
||
</>
|
||
) : (
|
||
<>
|
||
<Plus className="h-4 w-4 mr-2" />
|
||
Cadastrar Grupo
|
||
</>
|
||
)}
|
||
</Button>
|
||
|
||
<div className="mt-4 border-t pt-4">
|
||
<h3 className="font-medium mb-2">Informações importantes:</h3>
|
||
<ul className="list-disc list-inside space-y-1 text-sm text-muted-foreground">
|
||
<li>O grupo será criado automaticamente no seu WhatsApp</li>
|
||
<li>Você será adicionado como participante do grupo</li>
|
||
<li>O grupo terá o nome: FinDash - {userEmail.split('@')[0]}</li>
|
||
</ul>
|
||
</div>
|
||
</CardContent>
|
||
</Card>
|
||
);
|
||
};
|
||
|
||
export default CreateGroupForm;
|