feat(website): implement PDPA cookie consent banner and script manager (#14)
### Overview Implement PDPA & GDPR compliant Cookie Consent Management Platform (CMP) for pps/website: - **Zustand Store (cookieConsentStore.ts):** Stores consent record ( ecessary, nalytics, marketing) in localStorage with skipHydration: true for Next.js SSR safety. - **Cookie Banner (CookieBanner.tsx):** Fixed bottom floating banner with Quiet Luxury styling, providing Accept All, Reject Non-Essential, and Customize buttons. - **Preferences Modal (CookiePreferencesModal.tsx):** Detailed modal dialog allowing users to granularly toggle Analytics and Marketing cookies (Strictly Necessary is locked). - **Script Manager (ScriptManager.tsx):** Coordinates Google Consent Mode v2 (nalytics_storage, d_storage), conditionally injects GA4, Meta Pixel, and TikTok Pixel, and dispatches homaroma:consent-change DOM events. - **Footer Revocation Link:** Added Cookie Preferences link in the Support column of Footer.tsx so users can modify/revoke consent anytime. - **Multilingual Support:** Added localized text for TH, EN, JA, and ZH. --------- Co-authored-by: Your Name <you@example.com> Reviewed-on: #14 Co-authored-by: antigravity-bot <bot@kittisak.com>
This commit was merged in pull request #14.
This commit is contained in:
antigravity-bot BotandYour Name authored and admin committed
1 parent
9a18463bda
commit
b27afb4561
11 files changed
+692
-7
No files matched your search
@@ -0,0 +1,225 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useCookieConsentStore, type CookiePreferences } from '../../store/cookieConsentStore';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { X, ShieldCheck, BarChart3, Target, Lock, Check } from 'lucide-react';
|
||||
|
||||
export default function CookiePreferencesModal() {
|
||||
const { t } = useTranslation();
|
||||
const {
|
||||
record,
|
||||
isPreferencesOpen,
|
||||
closePreferences,
|
||||
savePreferences,
|
||||
acceptAll,
|
||||
rejectAll,
|
||||
} = useCookieConsentStore();
|
||||
|
||||
// Local state for interactive toggling inside the modal
|
||||
const [localPrefs, setLocalPrefs] = useState<CookiePreferences>({
|
||||
necessary: true,
|
||||
analytics: false,
|
||||
marketing: false,
|
||||
});
|
||||
|
||||
// Sync local state when modal opens
|
||||
useEffect(() => {
|
||||
if (isPreferencesOpen) {
|
||||
setLocalPrefs({
|
||||
necessary: true,
|
||||
analytics: Boolean(record.preferences.analytics),
|
||||
marketing: Boolean(record.preferences.marketing),
|
||||
});
|
||||
}
|
||||
}, [isPreferencesOpen, record.preferences]);
|
||||
|
||||
// Handle ESC key to close
|
||||
useEffect(() => {
|
||||
if (!isPreferencesOpen) return;
|
||||
const handleKeyDown = (e: KeyboardEvent) => {
|
||||
if (e.key === 'Escape') closePreferences();
|
||||
};
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [isPreferencesOpen, closePreferences]);
|
||||
|
||||
if (!isPreferencesOpen) return null;
|
||||
|
||||
const handleSave = () => {
|
||||
savePreferences(localPrefs);
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-labelledby="cookie-modal-title"
|
||||
className="fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-6 bg-black/50 backdrop-blur-sm animate-in fade-in duration-200"
|
||||
>
|
||||
<div
|
||||
className="w-full max-w-2xl bg-surface-card rounded-2xl shadow-2xl border border-border-color overflow-hidden flex flex-col max-h-[90vh] animate-in zoom-in-95 duration-200"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b border-border-color bg-surface-nav-rest">
|
||||
<div className="flex items-center gap-2.5">
|
||||
<div className="p-2 rounded-lg bg-brand-cool/70 text-brand-primary">
|
||||
<ShieldCheck className="w-5 h-5" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 id="cookie-modal-title" className="text-base sm:text-lg font-bold text-text-main">
|
||||
{t('cookie.prefTitle', 'ศูนย์การตั้งค่าความเป็นส่วนตัว (Cookie Preferences)')}
|
||||
</h2>
|
||||
<p className="text-xs text-muted-text">
|
||||
{t('cookie.prefSubtitle', 'จัดการความยินยอมในการจัดเก็บและใช้งานคุกกี้ตาม พ.ร.บ. คุ้มครองข้อมูลส่วนบุคคล (PDPA)')}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={closePreferences}
|
||||
className="p-2 text-muted-text hover:text-text-main rounded-lg hover:bg-surface-muted transition-colors"
|
||||
aria-label="Close"
|
||||
>
|
||||
<X className="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Body / Cookie Categories */}
|
||||
<div className="p-6 space-y-4 overflow-y-auto divide-y divide-border-color/60">
|
||||
{/* 1. Necessary Cookies */}
|
||||
<div className="pt-2 first:pt-0">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex items-start gap-3 flex-1">
|
||||
<div className="p-2 rounded-md bg-surface-muted text-muted-text mt-0.5">
|
||||
<Lock className="w-4 h-4" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="flex items-center gap-2">
|
||||
<h4 className="text-sm font-semibold text-text-main">
|
||||
{t('cookie.catNecessaryTitle', 'คุกกี้ที่จำเป็นอย่างยิ่ง (Strictly Necessary)')}
|
||||
</h4>
|
||||
<span className="text-[10px] font-medium px-2 py-0.5 rounded-full bg-emerald-50 text-emerald-700 border border-emerald-200">
|
||||
{t('cookie.alwaysActive', 'เปิดใช้งานเสมอ')}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-xs text-muted-text mt-1 leading-relaxed">
|
||||
{t(
|
||||
'cookie.catNecessaryDesc',
|
||||
'คุกกี้เหล่านี้มีความจำเป็นต่อการทำงานพื้นฐานของเว็บไซต์ เช่น การเข้าสู่ระบบ ความปลอดภัย การจดจำสินค้าในตะกร้า และการตั้งค่าภาษา เว็บไซต์ไม่สามารถทำงานได้อย่างถูกต้องหากไม่มีคุกกี้เหล่านี้'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="relative inline-flex items-center cursor-not-allowed opacity-80 shrink-0">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={true}
|
||||
disabled
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-brand-primary rounded-full peer-checked:after:translate-x-full after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:rounded-full after:h-5 after:w-5 after:transition-all"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 2. Analytics Cookies */}
|
||||
<div className="pt-4">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex items-start gap-3 flex-1">
|
||||
<div className="p-2 rounded-md bg-brand-cool/50 text-brand-primary mt-0.5">
|
||||
<BarChart3 className="w-4 h-4" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-text-main">
|
||||
{t('cookie.catAnalyticsTitle', 'คุกกี้เพื่อการวิเคราะห์และวัดผล (Analytics & Performance)')}
|
||||
</h4>
|
||||
<p className="text-xs text-muted-text mt-1 leading-relaxed">
|
||||
{t(
|
||||
'cookie.catAnalyticsDesc',
|
||||
'ช่วยให้เราทราบสถิติการเข้าชม พฤติกรรมหน้าเว็บยอดนิยม และเส้นทางการใช้งานของผู้ใช้ เพื่อนำข้อมูลไปปรับปรุงประสิทธิภาพและบริการ (เช่น Google Analytics 4) ข้อมูลจะถูกจัดเก็บแบบไม่ระบุตัวตนโดยตรง'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer shrink-0">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={localPrefs.analytics}
|
||||
onChange={(e) =>
|
||||
setLocalPrefs((prev) => ({ ...prev, analytics: e.target.checked }))
|
||||
}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-border-color peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-primary"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 3. Marketing Cookies */}
|
||||
<div className="pt-4">
|
||||
<div className="flex items-start justify-between gap-4">
|
||||
<div className="flex items-start gap-3 flex-1">
|
||||
<div className="p-2 rounded-md bg-brand-cool/50 text-brand-primary mt-0.5">
|
||||
<Target className="w-4 h-4" />
|
||||
</div>
|
||||
<div>
|
||||
<h4 className="text-sm font-semibold text-text-main">
|
||||
{t('cookie.catMarketingTitle', 'คุกกี้เพื่อการตลาดและโฆษณา (Marketing & Targeting)')}
|
||||
</h4>
|
||||
<p className="text-xs text-muted-text mt-1 leading-relaxed">
|
||||
{t(
|
||||
'cookie.catMarketingDesc',
|
||||
'ใช้เพื่อนำเสนอโปรโมชัน โฆษณา และเนื้อหาที่สอดคล้องกับความสนใจของท่านผ่านแพลตฟอร์มพันธมิตร (เช่น Meta Pixel, TikTok Pixel, Google Ads) รวมถึงวัดประสิทธิผลของแคมเปญ'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<label className="relative inline-flex items-center cursor-pointer shrink-0">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={localPrefs.marketing}
|
||||
onChange={(e) =>
|
||||
setLocalPrefs((prev) => ({ ...prev, marketing: e.target.checked }))
|
||||
}
|
||||
className="sr-only peer"
|
||||
/>
|
||||
<div className="w-11 h-6 bg-border-color peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-brand-primary"></div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer / Buttons */}
|
||||
<div className="flex flex-col-reverse sm:flex-row items-center justify-between gap-3 p-4 sm:p-5 border-t border-border-color bg-surface-nav-rest">
|
||||
<button
|
||||
type="button"
|
||||
onClick={rejectAll}
|
||||
className="w-full sm:w-auto px-4 py-2 text-xs sm:text-sm font-medium rounded-lg text-muted-text hover:text-text-main hover:bg-surface-muted transition-colors text-center"
|
||||
>
|
||||
{t('cookie.btnRejectAll', 'ปฏิเสธทั้งหมด')}
|
||||
</button>
|
||||
|
||||
<div className="flex items-center gap-2.5 w-full sm:w-auto">
|
||||
<button
|
||||
type="button"
|
||||
onClick={handleSave}
|
||||
className="flex-1 sm:flex-none inline-flex items-center justify-center gap-1.5 px-4 py-2 text-xs sm:text-sm font-medium rounded-lg border border-border-color text-text-main hover:bg-surface-muted hover:border-text-main/20 transition-all text-center"
|
||||
>
|
||||
<Check className="w-4 h-4 text-brand-primary" />
|
||||
<span>{t('cookie.btnSavePreferences', 'บันทึกการตั้งค่า')}</span>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={acceptAll}
|
||||
className="flex-1 sm:flex-none px-5 py-2 text-xs sm:text-sm font-semibold rounded-lg bg-brand-primary text-white hover:bg-brand-primary-hover shadow-sm transition-all text-center"
|
||||
>
|
||||
{t('cookie.btnAcceptAll', 'ยอมรับทั้งหมด')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in new issue
Block a user