feat: add analytics consent UI components
- Create AnalyticsConsent modal dialog for initial consent - Add AnalyticsConsentBanner for non-intrusive consent request - Implement privacy-focused consent flow with clear data collection info - Show what data is collected and privacy protections - Support both controlled and uncontrolled component usage - Add smooth animations with Framer Motion - Include accept/decline handlers with analytics service integration
This commit is contained in:
Vivek R
235
src/components/AnalyticsConsent.tsx
Normal file
235
src/components/AnalyticsConsent.tsx
Normal file
@@ -0,0 +1,235 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { motion, AnimatePresence } from 'framer-motion';
|
||||||
|
import { BarChart3, Shield, X, Check, Info } from 'lucide-react';
|
||||||
|
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Card } from '@/components/ui/card';
|
||||||
|
import { analytics } from '@/lib/analytics';
|
||||||
|
import { cn } from '@/lib/utils';
|
||||||
|
|
||||||
|
interface AnalyticsConsentProps {
|
||||||
|
open?: boolean;
|
||||||
|
onOpenChange?: (open: boolean) => void;
|
||||||
|
onComplete?: () => void;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const AnalyticsConsent: React.FC<AnalyticsConsentProps> = ({
|
||||||
|
open: controlledOpen,
|
||||||
|
onOpenChange,
|
||||||
|
onComplete,
|
||||||
|
}) => {
|
||||||
|
const [internalOpen, setInternalOpen] = useState(false);
|
||||||
|
const [hasShownConsent, setHasShownConsent] = useState(false);
|
||||||
|
|
||||||
|
const isControlled = controlledOpen !== undefined;
|
||||||
|
const open = isControlled ? controlledOpen : internalOpen;
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
// Check if we should show the consent dialog
|
||||||
|
const checkConsent = async () => {
|
||||||
|
await analytics.initialize();
|
||||||
|
const settings = analytics.getSettings();
|
||||||
|
|
||||||
|
if (!settings?.hasConsented && !hasShownConsent) {
|
||||||
|
if (!isControlled) {
|
||||||
|
setInternalOpen(true);
|
||||||
|
}
|
||||||
|
setHasShownConsent(true);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
checkConsent();
|
||||||
|
}, [isControlled, hasShownConsent]);
|
||||||
|
|
||||||
|
const handleOpenChange = (newOpen: boolean) => {
|
||||||
|
if (isControlled && onOpenChange) {
|
||||||
|
onOpenChange(newOpen);
|
||||||
|
} else {
|
||||||
|
setInternalOpen(newOpen);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAccept = async () => {
|
||||||
|
await analytics.enable();
|
||||||
|
handleOpenChange(false);
|
||||||
|
onComplete?.();
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDecline = async () => {
|
||||||
|
await analytics.disable();
|
||||||
|
handleOpenChange(false);
|
||||||
|
onComplete?.();
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Dialog open={open} onOpenChange={handleOpenChange}>
|
||||||
|
<DialogContent className="max-w-2xl p-0 overflow-hidden">
|
||||||
|
<div className="p-6 pb-0">
|
||||||
|
<DialogHeader>
|
||||||
|
<div className="flex items-center gap-3 mb-2">
|
||||||
|
<div className="p-2 bg-purple-100 dark:bg-purple-900/20 rounded-lg">
|
||||||
|
<BarChart3 className="h-6 w-6 text-purple-600 dark:text-purple-400" />
|
||||||
|
</div>
|
||||||
|
<DialogTitle className="text-2xl">Help Improve Claudia</DialogTitle>
|
||||||
|
</div>
|
||||||
|
<DialogDescription className="text-base mt-2">
|
||||||
|
We'd like to collect anonymous usage data to improve your experience.
|
||||||
|
</DialogDescription>
|
||||||
|
</DialogHeader>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-6 space-y-4">
|
||||||
|
<div className="space-y-3">
|
||||||
|
<Card className="p-4 border-green-200 dark:border-green-900 bg-green-50 dark:bg-green-950/20">
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<Check className="h-5 w-5 text-green-600 dark:text-green-400 flex-shrink-0 mt-0.5" />
|
||||||
|
<div className="space-y-1">
|
||||||
|
<p className="font-medium text-green-900 dark:text-green-100">What we collect:</p>
|
||||||
|
<ul className="text-sm text-green-800 dark:text-green-200 space-y-1">
|
||||||
|
<li>• Feature usage (which tools and commands you use)</li>
|
||||||
|
<li>• Performance metrics (app speed and reliability)</li>
|
||||||
|
<li>• Error reports (to fix bugs and improve stability)</li>
|
||||||
|
<li>• General usage patterns (session frequency and duration)</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="p-4 border-blue-200 dark:border-blue-900 bg-blue-50 dark:bg-blue-950/20">
|
||||||
|
<div className="flex gap-3">
|
||||||
|
<Shield className="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0 mt-0.5" />
|
||||||
|
<div className="space-y-1">
|
||||||
|
<p className="font-medium text-blue-900 dark:text-blue-100">Your privacy is protected:</p>
|
||||||
|
<ul className="text-sm text-blue-800 dark:text-blue-200 space-y-1">
|
||||||
|
<li>• No personal information is collected</li>
|
||||||
|
<li>• No file contents, paths, or project names</li>
|
||||||
|
<li>• No API keys or sensitive data</li>
|
||||||
|
<li>• Completely anonymous with random IDs</li>
|
||||||
|
<li>• You can opt-out anytime in Settings</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4">
|
||||||
|
<div className="flex gap-2 items-start">
|
||||||
|
<Info className="h-4 w-4 text-gray-500 flex-shrink-0 mt-0.5" />
|
||||||
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
||||||
|
This data helps us understand which features are most valuable, identify performance
|
||||||
|
issues, and prioritize improvements. Your choice won't affect any functionality.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="p-6 pt-0 flex gap-3">
|
||||||
|
<Button
|
||||||
|
onClick={handleDecline}
|
||||||
|
variant="outline"
|
||||||
|
className="flex-1"
|
||||||
|
>
|
||||||
|
No Thanks
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
onClick={handleAccept}
|
||||||
|
className="flex-1 bg-purple-600 hover:bg-purple-700 text-white"
|
||||||
|
>
|
||||||
|
Allow Analytics
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
interface AnalyticsConsentBannerProps {
|
||||||
|
className?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export const AnalyticsConsentBanner: React.FC<AnalyticsConsentBannerProps> = ({
|
||||||
|
className,
|
||||||
|
}) => {
|
||||||
|
const [visible, setVisible] = useState(false);
|
||||||
|
const [hasChecked, setHasChecked] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
const checkConsent = async () => {
|
||||||
|
if (hasChecked) return;
|
||||||
|
|
||||||
|
await analytics.initialize();
|
||||||
|
const settings = analytics.getSettings();
|
||||||
|
|
||||||
|
if (!settings?.hasConsented) {
|
||||||
|
setVisible(true);
|
||||||
|
}
|
||||||
|
setHasChecked(true);
|
||||||
|
};
|
||||||
|
|
||||||
|
// Delay banner appearance for better UX
|
||||||
|
const timer = setTimeout(checkConsent, 2000);
|
||||||
|
return () => clearTimeout(timer);
|
||||||
|
}, [hasChecked]);
|
||||||
|
|
||||||
|
const handleAccept = async () => {
|
||||||
|
await analytics.enable();
|
||||||
|
setVisible(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDecline = async () => {
|
||||||
|
await analytics.disable();
|
||||||
|
setVisible(false);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<AnimatePresence>
|
||||||
|
{visible && (
|
||||||
|
<motion.div
|
||||||
|
initial={{ y: 100, opacity: 0 }}
|
||||||
|
animate={{ y: 0, opacity: 1 }}
|
||||||
|
exit={{ y: 100, opacity: 0 }}
|
||||||
|
transition={{ type: "spring", damping: 25, stiffness: 300 }}
|
||||||
|
className={cn(
|
||||||
|
"fixed bottom-4 right-4 z-50 max-w-md",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Card className="p-4 shadow-lg border-purple-200 dark:border-purple-800">
|
||||||
|
<div className="flex items-start gap-3">
|
||||||
|
<BarChart3 className="h-5 w-5 text-purple-600 dark:text-purple-400 flex-shrink-0 mt-0.5" />
|
||||||
|
<div className="space-y-2 flex-1">
|
||||||
|
<p className="text-sm font-medium">Help improve Claudia</p>
|
||||||
|
<p className="text-xs text-gray-600 dark:text-gray-400">
|
||||||
|
We collect anonymous usage data to improve your experience. No personal data is collected.
|
||||||
|
</p>
|
||||||
|
<div className="flex gap-2 pt-1">
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
onClick={handleDecline}
|
||||||
|
className="text-xs"
|
||||||
|
>
|
||||||
|
No Thanks
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
onClick={handleAccept}
|
||||||
|
className="text-xs bg-purple-600 hover:bg-purple-700 text-white"
|
||||||
|
>
|
||||||
|
Allow
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
onClick={() => setVisible(false)}
|
||||||
|
className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
|
||||||
|
>
|
||||||
|
<X className="h-4 w-4" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</Card>
|
||||||
|
</motion.div>
|
||||||
|
)}
|
||||||
|
</AnimatePresence>
|
||||||
|
);
|
||||||
|
};
|
||||||
Reference in New Issue
Block a user