feat: real Brevo API verifier, auto-reset if campaign missing, and update existing campaign support
This commit is contained in:
Jakub_Hostacny committed
1 parent
2b4d3643cb
commit
99dd0f272e
4 files changed
+250
-27
No files matched your search
@@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Download,
|
||||
Send,
|
||||
@@ -10,7 +10,10 @@ import {
|
||||
FolderOpen,
|
||||
Save,
|
||||
Copy,
|
||||
Edit2
|
||||
Edit2,
|
||||
RefreshCw,
|
||||
UploadCloud,
|
||||
Check
|
||||
} from 'lucide-react';
|
||||
import { NewsletterCampaign } from '@/types/newsletter';
|
||||
|
||||
@@ -22,10 +25,11 @@ interface TopBarProps {
|
||||
onOpenSavedCampaigns: () => void;
|
||||
onDuplicateCampaign: () => void;
|
||||
onExportZip: () => void;
|
||||
onExportBrevo: () => void;
|
||||
onExportBrevo: (updateExisting?: boolean) => void;
|
||||
isExportingBrevo: boolean;
|
||||
brevoCampaignUrl?: string | null;
|
||||
brevoListingUrl?: string | null;
|
||||
onClearBrevoId?: () => void;
|
||||
onAddModule: (type: any) => void;
|
||||
}
|
||||
|
||||
@@ -41,9 +45,55 @@ export const TopBar: React.FC<TopBarProps> = ({
|
||||
isExportingBrevo,
|
||||
brevoCampaignUrl,
|
||||
brevoListingUrl = 'https://app.brevo.com/campaigns/listing',
|
||||
onClearBrevoId,
|
||||
onAddModule
|
||||
}) => {
|
||||
const [isEditingTitle, setIsEditingTitle] = useState(false);
|
||||
const [isVerifyingBrevo, setIsVerifyingBrevo] = useState(false);
|
||||
const [isVerifiedInBrevo, setIsVerifiedInBrevo] = useState(false);
|
||||
const [brevoCampaignStatus, setBrevoCampaignStatus] = useState<string | null>(null);
|
||||
|
||||
// Funkcia na reálne overenie existencie kampane priamo cez Brevo API
|
||||
const verifyCampaignInBrevo = async (campaignId?: number) => {
|
||||
const idToCheck = campaignId || campaign.brevoCampaignId;
|
||||
if (!idToCheck) {
|
||||
setIsVerifiedInBrevo(false);
|
||||
setBrevoCampaignStatus(null);
|
||||
return;
|
||||
}
|
||||
|
||||
setIsVerifyingBrevo(true);
|
||||
try {
|
||||
const res = await fetch(`/api/brevo/verify?campaignId=${encodeURIComponent(idToCheck)}`);
|
||||
const data = await res.json();
|
||||
|
||||
if (data.exists) {
|
||||
setIsVerifiedInBrevo(true);
|
||||
setBrevoCampaignStatus(data.status || 'draft');
|
||||
} else {
|
||||
// Kampaň v Brevo reálne neexistuje (vymazaná alebo prenos zlyhal)
|
||||
setIsVerifiedInBrevo(false);
|
||||
setBrevoCampaignStatus(null);
|
||||
if (onClearBrevoId) {
|
||||
onClearBrevoId();
|
||||
}
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn('Chyba pri overovaní Brevo kampane:', err);
|
||||
} finally {
|
||||
setIsVerifyingBrevo(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Pri zmene brevoCampaignId automaticky overíme stav v Brevo
|
||||
useEffect(() => {
|
||||
if (campaign.brevoCampaignId) {
|
||||
verifyCampaignInBrevo(campaign.brevoCampaignId);
|
||||
} else {
|
||||
setIsVerifiedInBrevo(false);
|
||||
setBrevoCampaignStatus(null);
|
||||
}
|
||||
}, [campaign.brevoCampaignId]);
|
||||
|
||||
return (
|
||||
<header className="h-16 bg-white border-b border-gray-200 px-4 md:px-6 flex items-center justify-between sticky top-0 z-30 shadow-xs">
|
||||
@@ -85,7 +135,7 @@ export const TopBar: React.FC<TopBarProps> = ({
|
||||
className="group flex items-center gap-1.5 cursor-pointer"
|
||||
title="Kliknite pre úpravu názvu"
|
||||
>
|
||||
<h1 className="text-xs md:text-sm font-bold text-gray-900 leading-tight max-w-[200px] md:max-w-xs truncate group-hover:text-blue-600">
|
||||
<h1 className="text-xs md:text-sm font-bold text-gray-900 leading-tight max-w-[180px] md:max-w-xs truncate group-hover:text-blue-600">
|
||||
{campaign.title || 'COOP Jednota Newsletter'}
|
||||
</h1>
|
||||
<Edit2 className="w-3 h-3 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" />
|
||||
@@ -122,7 +172,7 @@ export const TopBar: React.FC<TopBarProps> = ({
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Pravá časť: Uložiť, Duplikovať, Export do ZIP a Brevo */}
|
||||
{/* Pravá časť: Uložiť, Duplikovať, Export do ZIP a Inteligentné Brevo akcie */}
|
||||
<div className="flex items-center gap-2">
|
||||
{/* Tlačidlo manuálneho uloženia */}
|
||||
<button
|
||||
@@ -153,36 +203,69 @@ export const TopBar: React.FC<TopBarProps> = ({
|
||||
<span className="hidden sm:inline">Export ZIP</span>
|
||||
</button>
|
||||
|
||||
{brevoCampaignUrl ? (
|
||||
<div className="flex items-center gap-1.5">
|
||||
{/* BREVO SEKČNÉ OVLÁDANIE S REÁLNYM OVERENÍM */}
|
||||
{isVerifyingBrevo ? (
|
||||
<div className="flex items-center gap-1.5 text-xs font-bold text-gray-500 bg-gray-100 border border-gray-200 px-3.5 py-1.5 rounded-xl">
|
||||
<RefreshCw className="w-3.5 h-3.5 animate-spin text-gray-500" />
|
||||
<span>Overujem v Brevo...</span>
|
||||
</div>
|
||||
) : isVerifiedInBrevo && campaign.brevoCampaignId ? (
|
||||
/* Kampaň je overená priamo v Brevo: Ponúkame úpravu, aktualizáciu alebo odoslanie ako novú */
|
||||
<div className="flex items-center gap-1.5 bg-emerald-50 border border-emerald-200 p-1 rounded-xl">
|
||||
{/* Odkaz na úpravu v Brevo */}
|
||||
<a
|
||||
href={brevoCampaignUrl}
|
||||
href={`https://app.brevo.com/campaigns/email/edit/${campaign.brevoCampaignId}`}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="flex items-center gap-1.5 text-xs font-bold text-white bg-emerald-600 hover:bg-emerald-700 px-3.5 py-1.5 rounded-xl transition-all shadow-xs"
|
||||
title="Upraviť a odoslať kampaň priamo v Brevo"
|
||||
className="flex items-center gap-1 text-xs font-bold text-white bg-emerald-600 hover:bg-emerald-700 px-3 py-1.2 rounded-lg transition-all shadow-xs"
|
||||
title={`Kampaň #${campaign.brevoCampaignId} existuje v Brevo (${brevoCampaignStatus || 'draft'}). Kliknutím ju otvoríte v editore Brevo.`}
|
||||
>
|
||||
<ExternalLink className="w-3.5 h-3.5" />
|
||||
<span>Upraviť v Brevo</span>
|
||||
</a>
|
||||
|
||||
{/* Tlačidlo na aktualizáciu existujúcej kampane */}
|
||||
<button
|
||||
onClick={() => onExportBrevo(true)}
|
||||
disabled={isExportingBrevo}
|
||||
className="flex items-center gap-1 text-xs font-bold text-emerald-800 hover:bg-emerald-100 px-2.5 py-1.2 rounded-lg transition-all"
|
||||
title="Aktualizovať HTML tejto existujúcej kampane v Brevo s najnovšími zmenami"
|
||||
>
|
||||
<UploadCloud className="w-3.5 h-3.5 text-emerald-700" />
|
||||
<span className="hidden xl:inline">{isExportingBrevo ? 'Ukladám...' : 'Aktualizovať'}</span>
|
||||
</button>
|
||||
|
||||
{/* Tlačidlo na overenie stavu */}
|
||||
<button
|
||||
onClick={() => verifyCampaignInBrevo()}
|
||||
disabled={isVerifyingBrevo}
|
||||
className="p-1 hover:bg-emerald-200/60 text-emerald-700 rounded-lg transition-colors"
|
||||
title="Znovu overiť stav kampane v Brevo API"
|
||||
>
|
||||
<RefreshCw className="w-3 h-3" />
|
||||
</button>
|
||||
|
||||
{/* Odkaz na celkový zoznam kampaní */}
|
||||
<a
|
||||
href={brevoListingUrl || 'https://app.brevo.com/campaigns/listing'}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="hidden lg:flex items-center gap-1 text-[11px] font-bold text-emerald-800 bg-emerald-100 hover:bg-emerald-200 px-2.5 py-1.5 rounded-xl transition-all"
|
||||
title="Prehľad všetkých e-mailových kampaní v Brevo"
|
||||
className="text-[10px] font-bold text-emerald-700 hover:underline px-1.5 hidden md:inline"
|
||||
title="Prehľad všetkých kampaní v Brevo"
|
||||
>
|
||||
Zoznam
|
||||
</a>
|
||||
</div>
|
||||
) : (
|
||||
/* Kampaň v Brevo nie je overená / neexistuje: Zobrazujeme tlačidlo na prvotné odoslanie */
|
||||
<button
|
||||
onClick={onExportBrevo}
|
||||
onClick={() => onExportBrevo(false)}
|
||||
disabled={isExportingBrevo}
|
||||
className="flex items-center gap-1.5 text-xs font-bold text-white bg-[#003399] hover:bg-blue-800 disabled:opacity-50 px-3.5 py-1.5 rounded-xl transition-all shadow-xs"
|
||||
title="Vytvoriť a odoslať túto kampaň do Brevo"
|
||||
>
|
||||
<Send className="w-3.5 h-3.5" />
|
||||
<span>{isExportingBrevo ? 'Odosielam...' : 'Odoslať do Brevo'}</span>
|
||||
<span>{isExportingBrevo ? 'Odosielam do Brevo...' : 'Odoslať do Brevo'}</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
Reference in new issue
Block a user