GNXSOFT.COM
This commit is contained in:
Iliyan Angelov
326
gnx-react/components/shared/layout/CookieConsent.tsx
Normal file
326
gnx-react/components/shared/layout/CookieConsent.tsx
Normal file
@@ -0,0 +1,326 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import { useCookieConsent, CookiePreferences } from './CookieConsentContext';
|
||||
|
||||
// Cookie type definitions
|
||||
interface CookieType {
|
||||
id: keyof CookiePreferences;
|
||||
name: string;
|
||||
description: string;
|
||||
required: boolean;
|
||||
icon: string;
|
||||
}
|
||||
|
||||
const cookieTypes: CookieType[] = [
|
||||
{
|
||||
id: 'necessary',
|
||||
name: 'Necessary Cookies',
|
||||
description: 'Essential cookies required for the website to function properly. These cannot be disabled.',
|
||||
required: true,
|
||||
icon: 'fas fa-shield-alt',
|
||||
},
|
||||
{
|
||||
id: 'functional',
|
||||
name: 'Functional Cookies',
|
||||
description: 'These cookies enable enhanced functionality and personalization, such as remembering your preferences.',
|
||||
required: false,
|
||||
icon: 'fas fa-cogs',
|
||||
},
|
||||
];
|
||||
|
||||
// Main Cookie Consent Banner Component
|
||||
export const CookieConsentBanner: React.FC = () => {
|
||||
const { state, config, acceptAll, acceptNecessary, showSettings } = useCookieConsent();
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if (state.showBanner) {
|
||||
// Small delay to ensure smooth animation
|
||||
const timer = setTimeout(() => setIsVisible(true), 100);
|
||||
return () => clearTimeout(timer);
|
||||
} else {
|
||||
setIsVisible(false);
|
||||
}
|
||||
}, [state.showBanner]);
|
||||
|
||||
if (!state.showBanner || !isVisible) return null;
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
<motion.div
|
||||
initial={{ y: 100, opacity: 0 }}
|
||||
animate={{ y: 0, opacity: 1 }}
|
||||
exit={{ y: 100, opacity: 0 }}
|
||||
transition={{ duration: 0.3, ease: 'easeOut' }}
|
||||
className="cookie-consent-banner"
|
||||
>
|
||||
<div className="cookie-consent-banner__container">
|
||||
<div className="cookie-consent-banner__content">
|
||||
<div className="cookie-consent-banner__icon">
|
||||
<i className="fas fa-cookie-bite"></i>
|
||||
</div>
|
||||
<div className="cookie-consent-banner__text">
|
||||
<h3>Cookie Preferences</h3>
|
||||
<p>
|
||||
We use only essential functional cookies to ensure our website works properly.
|
||||
We do not collect personal data or use tracking cookies. Your privacy is important to us.
|
||||
</p>
|
||||
{config.showPrivacyNotice && (
|
||||
<div className="cookie-consent-banner__links">
|
||||
<a href={config.privacyPolicyUrl} target="_blank" rel="noopener noreferrer">
|
||||
Privacy Policy
|
||||
</a>
|
||||
<a href={config.cookiePolicyUrl} target="_blank" rel="noopener noreferrer">
|
||||
Cookie Policy
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="cookie-consent-banner__actions">
|
||||
<button
|
||||
type="button"
|
||||
className="cookie-consent-banner__btn cookie-consent-banner__btn--secondary"
|
||||
onClick={showSettings}
|
||||
>
|
||||
<i className="fas fa-cog"></i>
|
||||
Settings
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="cookie-consent-banner__btn cookie-consent-banner__btn--primary"
|
||||
onClick={acceptNecessary}
|
||||
>
|
||||
<i className="fas fa-check"></i>
|
||||
Accept Functional Only
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
);
|
||||
};
|
||||
|
||||
// Cookie Settings Modal Component
|
||||
export const CookieSettingsModal: React.FC = () => {
|
||||
const { state, config, hideSettings, acceptSelected, updatePreferences, withdrawConsent, exportConsentData } = useCookieConsent();
|
||||
const [tempPreferences, setTempPreferences] = useState<CookiePreferences>(state.preferences);
|
||||
|
||||
useEffect(() => {
|
||||
setTempPreferences(state.preferences);
|
||||
}, [state.preferences]);
|
||||
|
||||
const handlePreferenceChange = (type: keyof CookiePreferences, value: boolean) => {
|
||||
if (type === 'necessary') return; // Cannot change necessary cookies
|
||||
|
||||
setTempPreferences(prev => ({
|
||||
...prev,
|
||||
[type]: value,
|
||||
}));
|
||||
};
|
||||
|
||||
const handleSavePreferences = () => {
|
||||
acceptSelected(tempPreferences);
|
||||
};
|
||||
|
||||
const handleAcceptAll = () => {
|
||||
const allAccepted: CookiePreferences = {
|
||||
necessary: true,
|
||||
functional: true,
|
||||
};
|
||||
acceptSelected(allAccepted);
|
||||
};
|
||||
|
||||
if (!state.showSettings) return null;
|
||||
|
||||
return (
|
||||
<AnimatePresence>
|
||||
<motion.div
|
||||
initial={{ opacity: 0 }}
|
||||
animate={{ opacity: 1 }}
|
||||
exit={{ opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="cookie-settings-overlay"
|
||||
onClick={hideSettings}
|
||||
>
|
||||
<motion.div
|
||||
initial={{ scale: 0.9, opacity: 0 }}
|
||||
animate={{ scale: 1, opacity: 1 }}
|
||||
exit={{ scale: 0.9, opacity: 0 }}
|
||||
transition={{ duration: 0.2 }}
|
||||
className="cookie-settings-modal"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
<div className="cookie-settings-modal__header">
|
||||
<div className="cookie-settings-modal__header-content">
|
||||
<h2>Cookie Preferences</h2>
|
||||
<p className="cookie-settings-modal__version">v{config.version}</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="cookie-settings-modal__close"
|
||||
onClick={hideSettings}
|
||||
aria-label="Close settings"
|
||||
>
|
||||
<i className="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="cookie-settings-modal__content">
|
||||
<div className="cookie-settings-modal__description">
|
||||
<p>
|
||||
We respect your privacy and only use essential functional cookies.
|
||||
You can choose which types of cookies to allow below.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="cookie-settings-modal__types">
|
||||
{cookieTypes.map((cookieType) => (
|
||||
<div
|
||||
key={cookieType.id}
|
||||
className={`cookie-settings-modal__type ${
|
||||
cookieType.required ? 'cookie-settings-modal__type--required' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="cookie-settings-modal__type-header">
|
||||
<div className="cookie-settings-modal__type-info">
|
||||
<i className={cookieType.icon}></i>
|
||||
<div>
|
||||
<h4>{cookieType.name}</h4>
|
||||
<p>{cookieType.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="cookie-settings-modal__type-toggle">
|
||||
<label className="cookie-toggle">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={tempPreferences[cookieType.id]}
|
||||
onChange={(e) => handlePreferenceChange(cookieType.id, e.target.checked)}
|
||||
disabled={cookieType.required}
|
||||
/>
|
||||
<span className="cookie-toggle__slider"></span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="cookie-settings-modal__privacy">
|
||||
<h4>Privacy Information</h4>
|
||||
<ul>
|
||||
<li>We do not collect personal data without your explicit consent</li>
|
||||
<li>Functional cookies are used only to maintain website functionality</li>
|
||||
<li>We do not use tracking, analytics, or marketing cookies</li>
|
||||
<li>You can change your preferences at any time</li>
|
||||
<li>Data retention period: {config.retentionPeriod} days</li>
|
||||
<li>Contact: <a href={`mailto:${config.dataControllerEmail}`}>{config.dataControllerEmail}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{config.enableDetailedSettings && (
|
||||
<div className="cookie-settings-modal__enterprise">
|
||||
<h4>Enterprise Features</h4>
|
||||
<div className="cookie-settings-modal__enterprise-actions">
|
||||
<button
|
||||
type="button"
|
||||
className="cookie-settings-modal__btn cookie-settings-modal__btn--outline"
|
||||
onClick={() => {
|
||||
const data = exportConsentData();
|
||||
const blob = new Blob([data], { type: 'application/json' });
|
||||
const url = URL.createObjectURL(blob);
|
||||
const a = document.createElement('a');
|
||||
a.href = url;
|
||||
a.download = `cookie-consent-data-${new Date().toISOString().split('T')[0]}.json`;
|
||||
a.click();
|
||||
URL.revokeObjectURL(url);
|
||||
}}
|
||||
>
|
||||
<i className="fas fa-download"></i>
|
||||
Export Data
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="cookie-settings-modal__btn cookie-settings-modal__btn--danger"
|
||||
onClick={() => {
|
||||
if (confirm('Are you sure you want to withdraw your consent? This will reset all preferences.')) {
|
||||
withdrawConsent();
|
||||
}
|
||||
}}
|
||||
>
|
||||
<i className="fas fa-user-times"></i>
|
||||
Withdraw Consent
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="cookie-settings-modal__footer">
|
||||
<button
|
||||
type="button"
|
||||
className="cookie-settings-modal__btn cookie-settings-modal__btn--secondary"
|
||||
onClick={hideSettings}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="cookie-settings-modal__btn cookie-settings-modal__btn--primary"
|
||||
onClick={handleSavePreferences}
|
||||
>
|
||||
Save Preferences
|
||||
</button>
|
||||
</div>
|
||||
</motion.div>
|
||||
</motion.div>
|
||||
</AnimatePresence>
|
||||
);
|
||||
};
|
||||
|
||||
// Main Cookie Consent Component that combines both banner and modal
|
||||
export const CookieConsent: React.FC = () => {
|
||||
return (
|
||||
<>
|
||||
<CookieConsentBanner />
|
||||
<CookieSettingsModal />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
// Cookie Preferences Display Component (for footer or privacy page)
|
||||
export const CookiePreferencesDisplay: React.FC = () => {
|
||||
const { state, showSettings, resetConsent } = useCookieConsent();
|
||||
|
||||
return (
|
||||
<div className="cookie-preferences-display">
|
||||
<h3>Cookie Preferences</h3>
|
||||
<div className="cookie-preferences-display__status">
|
||||
<p>
|
||||
<strong>Status:</strong> {state.hasConsented ? 'Consent Given' : 'No Consent'}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Functional Cookies:</strong> {state.preferences.functional ? 'Enabled' : 'Disabled'}
|
||||
</p>
|
||||
</div>
|
||||
<div className="cookie-preferences-display__actions">
|
||||
<button
|
||||
type="button"
|
||||
className="cookie-preferences-display__btn"
|
||||
onClick={showSettings}
|
||||
>
|
||||
Update Preferences
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="cookie-preferences-display__btn cookie-preferences-display__btn--reset"
|
||||
onClick={resetConsent}
|
||||
>
|
||||
Reset Consent
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user