296 lines
12 KiB
TypeScript
296 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import React, { useState, useEffect } from 'react';
|
|
import {
|
|
Download,
|
|
Send,
|
|
ExternalLink,
|
|
CheckCircle2,
|
|
Plus,
|
|
FolderOpen,
|
|
Save,
|
|
Copy,
|
|
Edit2,
|
|
RefreshCw,
|
|
UploadCloud,
|
|
Check,
|
|
MessageSquare
|
|
} from 'lucide-react';
|
|
import { NewsletterCampaign } from '@/types/newsletter';
|
|
import { getBrevoCampaignUrl } from '@/lib/brevo';
|
|
|
|
interface TopBarProps {
|
|
campaign: NewsletterCampaign;
|
|
isSaving: boolean;
|
|
onSave: () => void;
|
|
onUpdateTitle: (title: string) => void;
|
|
onOpenSavedCampaigns: () => void;
|
|
onDuplicateCampaign: () => void;
|
|
onExportZip: () => void;
|
|
onExportBrevo: (updateExisting?: boolean) => void;
|
|
isExportingBrevo: boolean;
|
|
brevoCampaignUrl?: string | null;
|
|
brevoListingUrl?: string | null;
|
|
onClearBrevoId?: () => void;
|
|
onAddModule: (type: any) => void;
|
|
onOpenReviews?: () => void;
|
|
reviewOpenCount?: number; // počet otvorených pripomienok
|
|
}
|
|
|
|
export const TopBar: React.FC<TopBarProps> = ({
|
|
campaign,
|
|
isSaving,
|
|
onSave,
|
|
onUpdateTitle,
|
|
onOpenSavedCampaigns,
|
|
onDuplicateCampaign,
|
|
onExportZip,
|
|
onExportBrevo,
|
|
isExportingBrevo,
|
|
onClearBrevoId,
|
|
onAddModule,
|
|
onOpenReviews,
|
|
reviewOpenCount = 0
|
|
}) => {
|
|
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">
|
|
{/* Ľavá časť: Logo, Moje newslettre, Titulok a stav */}
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-9 h-9 rounded-xl bg-[#e2001a] flex items-center justify-center text-white font-black text-sm shadow-sm tracking-tighter shrink-0">
|
|
COOP
|
|
</div>
|
|
|
|
{/* Tlačidlo Moje newslettre */}
|
|
<button
|
|
onClick={onOpenSavedCampaigns}
|
|
className="flex items-center gap-1.5 text-xs font-bold text-gray-700 bg-gray-100 hover:bg-gray-200 px-3 py-1.5 rounded-xl border border-gray-200 transition-colors shadow-xs"
|
|
title="Otvoriť, duplikovať alebo vytvoriť nový newsletter"
|
|
>
|
|
<FolderOpen className="w-3.5 h-3.5 text-blue-600" />
|
|
<span className="hidden sm:inline">Moje newslettre</span>
|
|
</button>
|
|
|
|
<div className="h-6 w-px bg-gray-200 mx-1 hidden sm:block" />
|
|
|
|
{/* Názov kampane */}
|
|
<div className="flex flex-col">
|
|
{isEditingTitle ? (
|
|
<input
|
|
type="text"
|
|
autoFocus
|
|
value={campaign.title || ''}
|
|
onChange={(e) => onUpdateTitle(e.target.value)}
|
|
onBlur={() => setIsEditingTitle(false)}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') setIsEditingTitle(false);
|
|
}}
|
|
className="text-xs font-bold text-gray-900 border border-blue-400 rounded px-2 py-0.5 outline-none bg-blue-50/50 w-56"
|
|
/>
|
|
) : (
|
|
<div
|
|
onClick={() => setIsEditingTitle(true)}
|
|
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-[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 group-hover:text-blue-600 transition-colors" />
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center gap-2 mt-0.5">
|
|
<span className="text-[10px] text-gray-500">
|
|
{isSaving ? (
|
|
<span className="text-amber-600 font-medium animate-pulse">Ukladám...</span>
|
|
) : (
|
|
<span className="text-emerald-600 font-medium flex items-center gap-1">
|
|
<CheckCircle2 className="w-3 h-3" /> Uložené
|
|
</span>
|
|
)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pridanie sekcie */}
|
|
<div className="hidden lg:flex items-center gap-2 ml-4 pl-4 border-l border-gray-200">
|
|
<button
|
|
onClick={() => onAddModule('banner')}
|
|
className="text-[11px] font-bold text-gray-700 bg-gray-50 hover:bg-gray-100 border border-gray-200 px-2.5 py-1 rounded-lg flex items-center gap-1 transition-colors"
|
|
>
|
|
<Plus className="w-3 h-3 text-gray-500" /> Nový Banner
|
|
</button>
|
|
<button
|
|
onClick={() => onAddModule('products_grid')}
|
|
className="text-[11px] font-bold text-gray-700 bg-gray-50 hover:bg-gray-100 border border-gray-200 px-2.5 py-1 rounded-lg flex items-center gap-1 transition-colors"
|
|
>
|
|
<Plus className="w-3 h-3 text-gray-500" /> Produktový rad
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Pravá časť: Uložiť, Duplikovať, Export do ZIP a Inteligentné Brevo akcie */}
|
|
<div className="flex items-center gap-2">
|
|
{/* Pripomienky cez zdieľaný odkaz */}
|
|
{onOpenReviews && (
|
|
<button
|
|
onClick={onOpenReviews}
|
|
className="relative flex items-center gap-1.5 text-xs font-bold text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 px-3 py-1.5 rounded-xl transition-all shadow-xs"
|
|
title="Odkaz na pripomienky a zoznam pripomienok"
|
|
>
|
|
<MessageSquare className="w-3.5 h-3.5 text-gray-600" />
|
|
<span className="hidden md:inline">Pripomienky</span>
|
|
{reviewOpenCount > 0 && (
|
|
<span className="absolute -top-1.5 -right-1.5 min-w-[18px] h-[18px] px-1 rounded-full bg-[#e2001a] text-white text-[10px] font-black flex items-center justify-center">
|
|
{reviewOpenCount}
|
|
</span>
|
|
)}
|
|
</button>
|
|
)}
|
|
|
|
{/* Tlačidlo manuálneho uloženia */}
|
|
<button
|
|
onClick={onSave}
|
|
disabled={isSaving}
|
|
className="flex items-center gap-1.5 text-xs font-bold text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 disabled:opacity-50 px-3 py-1.5 rounded-xl transition-all shadow-xs"
|
|
title="Uložiť zmeny ihneď do databázy"
|
|
>
|
|
<Save className="w-3.5 h-3.5 text-gray-600" />
|
|
<span className="hidden md:inline">Uložiť</span>
|
|
</button>
|
|
|
|
{/* Tlačidlo duplikovania celej kampane */}
|
|
<button
|
|
onClick={onDuplicateCampaign}
|
|
className="flex items-center gap-1.5 text-xs font-bold text-gray-700 bg-white border border-gray-200 hover:bg-gray-50 px-3 py-1.5 rounded-xl transition-all shadow-xs"
|
|
title="Vytvoriť kópiu tohto newslettera"
|
|
>
|
|
<Copy className="w-3.5 h-3.5 text-gray-600" />
|
|
<span className="hidden md:inline">Duplikovať</span>
|
|
</button>
|
|
|
|
<button
|
|
onClick={onExportZip}
|
|
className="flex items-center gap-1.5 text-xs font-bold text-gray-700 bg-white border border-gray-300 hover:bg-gray-50 px-3.5 py-1.5 rounded-xl transition-all shadow-xs"
|
|
>
|
|
<Download className="w-3.5 h-3.5 text-gray-600" />
|
|
<span className="hidden sm:inline">Export ZIP</span>
|
|
</button>
|
|
|
|
{/* 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 zoznam / úpravu v Brevo */}
|
|
<a
|
|
href={getBrevoCampaignUrl(campaign.brevoCampaignId)}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
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} je v Brevo (${brevoCampaignStatus || 'draft'}). Kliknutím ju otvoríte v Brevo.`}
|
|
>
|
|
<ExternalLink className="w-3.5 h-3.5" />
|
|
<span>Otvoriť 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 odoslanie ako úplne novej kampane */}
|
|
<button
|
|
onClick={() => onExportBrevo(false)}
|
|
disabled={isExportingBrevo}
|
|
className="flex items-center gap-1 text-xs font-bold text-emerald-800 hover:bg-emerald-100 px-2 py-1.2 rounded-lg transition-all"
|
|
title="Vytvoriť a odoslať túto kampaň do Brevo ako novú kópiu"
|
|
>
|
|
<Send className="w-3 h-3 text-emerald-700" />
|
|
<span className="hidden 2xl:inline">Ako novú</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>
|
|
</div>
|
|
) : (
|
|
/* Kampaň v Brevo nie je overená / neexistuje: Zobrazujeme tlačidlo na prvotné odoslanie */
|
|
<button
|
|
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 do Brevo...' : 'Odoslať do Brevo'}</span>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</header>
|
|
);
|
|
};
|