195 lines
8.5 KiB
TypeScript
195 lines
8.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import Link from "next/link";
|
|
import { Cookie, X, Check, Settings2, Info } from "lucide-react";
|
|
import { useConsentStore } from "@/lib/consent-store";
|
|
|
|
export function CookieBanner() {
|
|
const {
|
|
isInitialized,
|
|
isOpen,
|
|
analytics,
|
|
marketing,
|
|
setConsent,
|
|
acceptAll,
|
|
rejectOptional,
|
|
closeBanner
|
|
} = useConsentStore();
|
|
|
|
const [showSettings, setShowSettings] = useState(false);
|
|
const [localAnalytics, setLocalAnalytics] = useState(true);
|
|
const [localMarketing, setLocalMarketing] = useState(true);
|
|
|
|
if (!isInitialized || !isOpen) return null;
|
|
|
|
const handleSaveSettings = () => {
|
|
setConsent(localAnalytics, localMarketing);
|
|
setShowSettings(false);
|
|
};
|
|
|
|
const handleOpenSettings = () => {
|
|
const hasConsent = localStorage.getItem('airproject_cookie_consent_v2');
|
|
setLocalAnalytics(hasConsent ? analytics : true);
|
|
setLocalMarketing(hasConsent ? marketing : true);
|
|
setShowSettings(true);
|
|
};
|
|
|
|
return (
|
|
<div className="fixed bottom-0 left-0 right-0 z-50 p-4 md:p-6 pb-safe flex flex-col items-center pointer-events-none">
|
|
<div className="relative pointer-events-auto max-w-5xl w-full bg-slate-900 border border-slate-700 shadow-2xl rounded-2xl overflow-hidden animate-in slide-in-from-bottom-10 fade-in duration-500">
|
|
|
|
{/* WIDOK GŁÓWNY BANERA */}
|
|
{!showSettings && (
|
|
<div className="p-5 md:p-8">
|
|
<div className="flex flex-col md:flex-row items-start gap-6">
|
|
<div className="bg-slate-800 p-3 rounded-full shrink-0 text-white hidden md:block border border-slate-700 shadow-sm">
|
|
<Cookie className="w-8 h-8" />
|
|
</div>
|
|
|
|
<div className="flex-grow">
|
|
<h3 className="text-white font-bold text-lg md:text-xl mb-2 flex items-center gap-2">
|
|
<Cookie className="w-5 h-5 md:hidden text-white" />
|
|
Szanujemy Twoją prywatność
|
|
</h3>
|
|
<p className="text-slate-300 text-sm md:text-base leading-relaxed mb-4">
|
|
Używamy plików cookies i podobnych technologii, by zapewnić prawidłowe działanie serwisu, personalizować treści oraz analizować ruch.
|
|
Możesz zaakceptować wszystkie ciasteczka, odrzucić opcjonalne lub dostosować zgody w ustawieniach.
|
|
Szczegóły znajdziesz w naszej{" "}
|
|
<Link href="/polityka-prywatnosci" className="text-accent hover:text-white underline underline-offset-2">
|
|
Polityce Prywatności
|
|
</Link>.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row flex-wrap items-center gap-3 mt-6">
|
|
<button
|
|
onClick={acceptAll}
|
|
className="btn btn-primary text-white flex-grow sm:flex-grow-0 border-none shadow-md"
|
|
>
|
|
<Check className="w-4 h-4 mr-1 text-white" /> Akceptuj wszystkie
|
|
</button>
|
|
<button
|
|
onClick={rejectOptional}
|
|
className="btn btn-outline border-slate-600 text-slate-200 hover:bg-slate-800 hover:text-white hover:border-slate-500 flex-grow sm:flex-grow-0"
|
|
>
|
|
<X className="w-4 h-4 mr-1 text-slate-300" /> Tylko niezbędne
|
|
</button>
|
|
<div className="flex-grow hidden sm:block"></div>
|
|
<button
|
|
onClick={handleOpenSettings}
|
|
className="btn btn-ghost text-slate-300 hover:text-white hover:bg-slate-800 flex-grow sm:flex-grow-0 group"
|
|
>
|
|
<Settings2 className="w-4 h-4 mr-1 text-slate-300 group-hover:text-white" /> Ustawienia
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Przycisk zamknięcia wymusza "Tylko niezbędne" dla bezpieczeństwa */}
|
|
<button
|
|
onClick={rejectOptional}
|
|
className="absolute top-4 right-4 text-slate-500 hover:text-white p-1"
|
|
aria-label="Zamknij"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
{/* WIDOK ZARZĄDZANIA (MODAL) */}
|
|
{showSettings && (
|
|
<div className="flex flex-col h-full max-h-[85vh]">
|
|
<div className="p-5 border-b border-slate-700 flex justify-between items-center bg-slate-800/50">
|
|
<h3 className="text-white font-bold text-lg flex items-center gap-2">
|
|
<Settings2 className="w-5 h-5 text-slate-300" />
|
|
Ustawienia plików cookies
|
|
</h3>
|
|
<button
|
|
onClick={() => setShowSettings(false)}
|
|
className="text-slate-400 hover:text-white"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-5 overflow-y-auto space-y-6">
|
|
{/* Niezbędne */}
|
|
<div className="flex gap-4 items-start bg-slate-800/30 p-4 rounded-xl border border-slate-700/50">
|
|
<div className="pt-1">
|
|
<input type="checkbox" className="toggle toggle-primary" checked disabled />
|
|
</div>
|
|
<div>
|
|
<h4 className="text-white font-semibold mb-1 flex items-center gap-2">
|
|
Niezbędne <span className="text-[10px] uppercase bg-slate-700 px-2 py-0.5 rounded text-slate-300">Zawsze aktywne</span>
|
|
</h4>
|
|
<p className="text-slate-400 text-sm">
|
|
Te pliki cookies są wymagane do podstawowego działania strony (np. nawigacja, sesja koszyka, zapisywanie tych preferencji). Nie można ich wyłączyć.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Analityczne */}
|
|
<div className="flex gap-4 items-start p-2">
|
|
<div className="pt-1">
|
|
<input
|
|
type="checkbox"
|
|
className="toggle toggle-primary bg-slate-600 border-slate-500 [--tglbg:theme(colors.slate.200)] hover:bg-slate-500"
|
|
checked={localAnalytics}
|
|
onChange={(e) => setLocalAnalytics(e.target.checked)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-white font-semibold mb-1">Analityczne (Google Analytics 4)</h4>
|
|
<p className="text-slate-400 text-sm">
|
|
Pozwalają nam badać statystyki ruchu na stronie, rozumieć jak Użytkownicy z niej korzystają i na tej podstawie optymalizować jej działanie.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Marketingowe */}
|
|
<div className="flex gap-4 items-start p-2">
|
|
<div className="pt-1">
|
|
<input
|
|
type="checkbox"
|
|
className="toggle toggle-primary bg-slate-600 border-slate-500 [--tglbg:theme(colors.slate.200)] hover:bg-slate-500"
|
|
checked={localMarketing}
|
|
onChange={(e) => setLocalMarketing(e.target.checked)}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-white font-semibold mb-1">Marketingowe (Google Tag Manager)</h4>
|
|
<p className="text-slate-400 text-sm">
|
|
Pozwalają nam dopasowywać treści reklamowe do Twoich zainteresowań w sieci (np. w systemach Google Ads, Facebook Ads) oraz mierzyć skuteczność kampanii.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-5 border-t border-slate-700 bg-slate-800/50 flex flex-col-reverse sm:flex-row justify-end gap-3 items-center">
|
|
<button
|
|
onClick={rejectOptional}
|
|
className="btn btn-ghost text-slate-400 hover:text-white w-full sm:w-auto"
|
|
>
|
|
Odrzuć wszystkie
|
|
</button>
|
|
<button
|
|
onClick={acceptAll}
|
|
className="btn btn-outline border-slate-600 text-white hover:bg-slate-700 w-full sm:w-auto"
|
|
>
|
|
Akceptuj wszystkie
|
|
</button>
|
|
<button
|
|
onClick={handleSaveSettings}
|
|
className="btn btn-primary text-white w-full sm:w-auto"
|
|
>
|
|
Zapisz ustawienia
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|