Make klaviyocampaign filter buttons exclusive

This commit is contained in:
2024-12-30 13:58:46 -05:00
parent ef0d48826a
commit ecd8340785

View File

@@ -267,7 +267,14 @@ const KlaviyoCampaigns = ({ className }) => {
<Button <Button
variant={selectedChannels.email ? "default" : "outline"} variant={selectedChannels.email ? "default" : "outline"}
size="sm" size="sm"
onClick={() => setSelectedChannels(prev => ({ ...prev, email: !prev.email }))} onClick={() => setSelectedChannels(prev => {
if (prev.email && Object.values(prev).filter(Boolean).length === 1) {
// If only email is selected, show all
return { email: true, sms: true, blog: true };
}
// Show only email
return { email: true, sms: false, blog: false };
})}
> >
<Mail className="h-4 w-4" /> <Mail className="h-4 w-4" />
<span className="hidden sm:inline">Email</span> <span className="hidden sm:inline">Email</span>
@@ -275,7 +282,14 @@ const KlaviyoCampaigns = ({ className }) => {
<Button <Button
variant={selectedChannels.sms ? "default" : "outline"} variant={selectedChannels.sms ? "default" : "outline"}
size="sm" size="sm"
onClick={() => setSelectedChannels(prev => ({ ...prev, sms: !prev.sms }))} onClick={() => setSelectedChannels(prev => {
if (prev.sms && Object.values(prev).filter(Boolean).length === 1) {
// If only SMS is selected, show all
return { email: true, sms: true, blog: true };
}
// Show only SMS
return { email: false, sms: true, blog: false };
})}
> >
<MessageSquare className="h-4 w-4" /> <MessageSquare className="h-4 w-4" />
<span className="hidden sm:inline">SMS</span> <span className="hidden sm:inline">SMS</span>
@@ -283,7 +297,14 @@ const KlaviyoCampaigns = ({ className }) => {
<Button <Button
variant={selectedChannels.blog ? "default" : "outline"} variant={selectedChannels.blog ? "default" : "outline"}
size="sm" size="sm"
onClick={() => setSelectedChannels(prev => ({ ...prev, blog: !prev.blog }))} onClick={() => setSelectedChannels(prev => {
if (prev.blog && Object.values(prev).filter(Boolean).length === 1) {
// If only blog is selected, show all
return { email: true, sms: true, blog: true };
}
// Show only blog
return { email: false, sms: false, blog: true };
})}
> >
<BookOpen className="h-4 w-4" /> <BookOpen className="h-4 w-4" />
<span className="hidden sm:inline">Blog</span> <span className="hidden sm:inline">Blog</span>