 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/domains/lavocat.ca/public_html/src/components/ |
import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import { usePublicNotifications } from '@/context/PublicNotificationContext';
interface GroupChatPromotionProps {
variant?: 'banner' | 'card' | 'modal' | 'sidebar';
className?: string;
}
const GroupChatPromotion: React.FC<GroupChatPromotionProps> = ({
variant = 'card',
className = ''
}) => {
const router = useRouter();
const { visitorBehavior } = usePublicNotifications();
const [isVisible, setIsVisible] = useState(false);
const [currentTestimonial, setCurrentTestimonial] = useState(0);
const content = visitorBehavior.language === 'fr' ? {
title: 'Rejoignez Notre Communauté',
subtitle: 'Connectez-vous avec d\'autres membres du recours collectif',
description: 'Notre chat communautaire est un espace sûr où les membres partagent leurs expériences, s\'entraident et restent informés des derniers développements.',
features: [
{ icon: '🤝', text: 'Soutien mutuel 24/7' },
{ icon: '📢', text: 'Mises à jour en temps réel' },
{ icon: '🔒', text: 'Environnement sécurisé' },
{ icon: '💪', text: 'Force collective' }
],
testimonials: [
'"Ce chat m\'a aidé à comprendre mes droits et à me sentir moins seul." - Marie, Montréal',
'"Les mises à jour instantanées sont très précieuses." - Jean, Québec',
'"Une communauté vraiment solidaire." - Sophie, Gatineau'
],
stats: {
members: '500+ membres actifs',
responses: 'Réponses en moyenne sous 30 min',
updates: 'Mises à jour quotidiennes'
},
cta: {
primary: 'Rejoindre Maintenant',
secondary: 'En Savoir Plus'
}
} : {
title: 'Join Our Community',
subtitle: 'Connect with other class action members',
description: 'Our community chat is a safe space where members share experiences, support each other, and stay informed about the latest developments.',
features: [
{ icon: '🤝', text: '24/7 mutual support' },
{ icon: '📢', text: 'Real-time updates' },
{ icon: '🔒', text: 'Secure environment' },
{ icon: '💪', text: 'Collective strength' }
],
testimonials: [
'"This chat helped me understand my rights and feel less alone." - Sarah, Toronto',
'"The instant updates are invaluable." - Mike, Vancouver',
'"Truly supportive community." - Lisa, Calgary'
],
stats: {
members: '500+ active members',
responses: 'Average response under 30 min',
updates: 'Daily updates'
},
cta: {
primary: 'Join Now',
secondary: 'Learn More'
}
};
useEffect(() => {
// Show after some engagement time
const timer = setTimeout(() => {
if (typeof window !== 'undefined') {
const chatPromoShown = sessionStorage.getItem(`chat_promo_${variant}_${visitorBehavior.sessionId}`);
if (!chatPromoShown && visitorBehavior.timeOnSite > 30) {
setIsVisible(true);
}
}
}, 3000);
return () => clearTimeout(timer);
}, [variant, visitorBehavior.sessionId, visitorBehavior.timeOnSite]);
useEffect(() => {
// Rotate testimonials
const interval = setInterval(() => {
setCurrentTestimonial((prev) => (prev + 1) % content.testimonials.length);
}, 4000);
return () => clearInterval(interval);
}, [content.testimonials.length]);
const handleJoin = () => {
if (typeof window !== 'undefined') {
sessionStorage.setItem(`chat_promo_${variant}_${visitorBehavior.sessionId}`, 'clicked');
}
router.push('/group-chat');
};
const handleDismiss = () => {
if (typeof window !== 'undefined') {
sessionStorage.setItem(`chat_promo_${variant}_${visitorBehavior.sessionId}`, 'dismissed');
}
setIsVisible(false);
};
if (!isVisible) return null;
const renderBanner = () => (
<div className={`bg-gradient-to-r from-blue-600 via-purple-600 to-indigo-600 text-white p-4 relative ${className}`}>
<button
onClick={handleDismiss}
className="absolute top-2 right-2 text-white hover:text-gray-200 text-xl"
>
×
</button>
<div className="container mx-auto flex items-center justify-between">
<div className="flex items-center space-x-4">
<div className="text-3xl">💬</div>
<div>
<h3 className="font-bold text-lg">{content.title}</h3>
<p className="text-sm opacity-90">{content.subtitle}</p>
</div>
</div>
<div className="flex space-x-3">
<button
onClick={handleJoin}
className="bg-white text-blue-600 px-6 py-2 rounded-full font-semibold hover:bg-gray-100 transition-colors"
>
{content.cta.primary}
</button>
</div>
</div>
</div>
);
const renderCard = () => (
<div className={`bg-white rounded-lg shadow-lg border border-gray-200 p-6 max-w-md mx-auto ${className}`}>
<button
onClick={handleDismiss}
className="float-right text-gray-400 hover:text-gray-600 text-xl mb-2"
>
×
</button>
<div className="text-center mb-4">
<div className="text-4xl mb-2">💬</div>
<h3 className="text-xl font-bold text-gray-800">{content.title}</h3>
<p className="text-sm text-gray-600">{content.subtitle}</p>
</div>
<p className="text-gray-700 text-sm mb-4">{content.description}</p>
<div className="grid grid-cols-2 gap-2 mb-4">
{content.features.map((feature, index) => (
<div key={index} className="flex items-center space-x-2 text-xs">
<span>{feature.icon}</span>
<span className="text-gray-700">{feature.text}</span>
</div>
))}
</div>
<div className="bg-gray-50 rounded p-3 mb-4">
<p className="text-xs text-gray-600 italic">
{content.testimonials[currentTestimonial]}
</p>
</div>
<div className="text-center space-y-2">
<div className="text-xs text-gray-500 grid grid-cols-1 gap-1">
<div>👥 {content.stats.members}</div>
<div>⚡ {content.stats.responses}</div>
<div>📈 {content.stats.updates}</div>
</div>
<button
onClick={handleJoin}
className="w-full bg-gradient-to-r from-blue-600 to-purple-600 text-white py-2 px-4 rounded-full font-semibold hover:from-blue-700 hover:to-purple-700 transition-all"
>
{content.cta.primary}
</button>
</div>
</div>
);
const renderModal = () => (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
<div className="bg-white rounded-lg max-w-lg w-full p-6">
<div className="flex justify-between items-center mb-4">
<h3 className="text-2xl font-bold text-gray-800">{content.title}</h3>
<button
onClick={handleDismiss}
className="text-gray-400 hover:text-gray-600 text-2xl"
>
×
</button>
</div>
<div className="text-center mb-6">
<div className="text-5xl mb-3">💬</div>
<p className="text-gray-600">{content.description}</p>
</div>
<div className="grid grid-cols-2 gap-4 mb-6">
{content.features.map((feature, index) => (
<div key={index} className="flex items-center space-x-3 p-3 bg-gray-50 rounded">
<span className="text-2xl">{feature.icon}</span>
<span className="text-sm font-medium text-gray-700">{feature.text}</span>
</div>
))}
</div>
<div className="bg-blue-50 rounded-lg p-4 mb-6">
<p className="text-sm text-blue-800 italic text-center">
{content.testimonials[currentTestimonial]}
</p>
</div>
<div className="flex space-x-3">
<button
onClick={handleJoin}
className="flex-1 bg-gradient-to-r from-blue-600 to-purple-600 text-white py-3 px-6 rounded-full font-semibold hover:from-blue-700 hover:to-purple-700 transition-all"
>
{content.cta.primary}
</button>
<button
onClick={handleDismiss}
className="px-6 py-3 text-gray-600 hover:text-gray-800 font-medium"
>
{visitorBehavior.language === 'fr' ? 'Plus tard' : 'Later'}
</button>
</div>
</div>
</div>
);
const renderSidebar = () => (
<div className={`bg-gradient-to-b from-blue-50 to-purple-50 border border-blue-200 rounded-lg p-4 ${className}`}>
<button
onClick={handleDismiss}
className="float-right text-gray-400 hover:text-gray-600 text-lg"
>
×
</button>
<div className="text-center mb-3">
<div className="text-3xl mb-1">💬</div>
<h4 className="font-bold text-gray-800 text-sm">{content.title}</h4>
</div>
<div className="space-y-2 mb-3">
{content.features.slice(0, 2).map((feature, index) => (
<div key={index} className="flex items-center space-x-2 text-xs">
<span>{feature.icon}</span>
<span className="text-gray-700">{feature.text}</span>
</div>
))}
</div>
<button
onClick={handleJoin}
className="w-full bg-blue-600 text-white py-2 px-3 rounded text-sm font-medium hover:bg-blue-700 transition-colors"
>
{content.cta.primary}
</button>
</div>
);
switch (variant) {
case 'banner':
return renderBanner();
case 'modal':
return renderModal();
case 'sidebar':
return renderSidebar();
default:
return renderCard();
}
};
export default GroupChatPromotion;