Merge pull request #35 from Evently-Event-Management/subscribe

Subscribe

Author: dpiyumal2319

src/app/(home-app)/_components/EventCard.tsx

@@ -2,14 +2,17 @@ import { Card, CardContent, CardHeader } from "@/components/ui/card"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
-import { CalendarDays, MapPin, Tag, Share2, Bookmark, Clock, Users } from "lucide-react"
+import { CalendarDays, MapPin, Tag, Share2, Clock, Users, Bell, Loader2 } from "lucide-react"
 import { cn, formatCurrency } from "@/lib/utils"
 import { DiscountType } from "@/types/enums/discountType";
 import { DiscountThumbnailDTO, EventThumbnailDTO } from "@/types/event";
 import Image from "next/image";
 import { AspectRatio } from "@/components/ui/aspect-ratio";
 import Link from "next/link";
-import { MouseEvent } from "react";
+import { MouseEvent, useState, useEffect } from "react";
+import { toast } from "sonner";
+import { subscribeToEntity, unsubscribeFromEntity, checkSubscriptionStatus } from "@/lib/subscriptionUtils";
+import { EventShareDialog } from "./EventShareDialog";
 
 interface EventCardProps {
     event: EventThumbnailDTO
@@ -95,15 +98,70 @@ export function EventCard({ event, className }: EventCardProps) {
 
     const bestDiscount = getBestDiscount();
 
-    // Handler to stop propagation for nested interactive elements
-    const handleButtonClick = (e: MouseEvent<HTMLButtonElement>) => {
+    // State for subscription status and share dialog
+    const [isSubscribed, setIsSubscribed] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
+    const [isShareDialogOpen, setIsShareDialogOpen] = useState(false);
+
+    // Check subscription status on mount
+    useEffect(() => {
+        const checkStatus = async () => {
+            setIsLoading(true);
+            try {
+                const status = await checkSubscriptionStatus(event.id, 'event');
+                setIsSubscribed(status);
+            } catch (error) {
+                console.error("Error checking subscription status:", error);
+            } finally {
+                setIsLoading(false);
+            }
+        };
+        
+        checkStatus();
+    }, [event.id]);
+
+    // Handler for subscribe/unsubscribe action
+    const handleSubscribeClick = async (e: MouseEvent<HTMLButtonElement>) => {
         e.stopPropagation();
         e.preventDefault();
-        // Add button-specific logic here (e.g., open share modal, call bookmark API)
-        console.log("Button clicked, navigation prevented.");
+        
+        if (isLoading) return;
+        
+        setIsLoading(true);
+        
+        try {
+            if (isSubscribed) {
+                // Unsubscribe
+                const success = await unsubscribeFromEntity({
+                    id: event.id,
+                    type: 'event',
+                    name: event.title
+                });
+                
+                if (success) {
+                    setIsSubscribed(false);
+                    toast.success(`Unsubscribed from ${event.title}`);
+                }
+            } else {
+                // Subscribe
+                const success = await subscribeToEntity({
+                    id: event.id,
+                    type: 'event',
+                    name: event.title
+                });
+                
+                if (success) {
+                    setIsSubscribed(true);
+                    toast.success(`Subscribed to ${event.title}`);
+                }
+            }
+        } finally {
+            setIsLoading(false);
+        }
     };
 
     return (
+        <>
         <Link href={`/events/${event.id}`} className="block">
             <Card
                 className={cn(
@@ -127,18 +185,43 @@ export function EventCard({ event, className }: EventCardProps) {
                                 size="icon"
                                 variant="secondary"
                                 className="bg-background/80 text-foreground backdrop-blur-sm hover:bg-background/95 p-2 h-9 w-9 rounded-full"
-                                onClick={handleButtonClick}
+                                onClick={(e) => {
+                                    e.stopPropagation();
+                                    e.preventDefault();
+                                    setIsShareDialogOpen(true);
+                                }}
                             >
                                 <Share2 className="w-4 h-4" />
                             </Button>
-                            <Button
-                                size="icon"
-                                variant="secondary"
-                                className="bg-background/80 text-foreground backdrop-blur-sm hover:bg-background/95 p-2 h-9 w-9 rounded-full"
-                                onClick={handleButtonClick}
-                            >
-                                <Bookmark className="w-4 h-4" />
-                            </Button>
+                            <TooltipProvider delayDuration={200}>
+                                <Tooltip>
+                                    <TooltipTrigger asChild>
+                                        <Button
+                                            size="icon"
+                                            variant="secondary"
+                                            disabled={isLoading}
+                                            className={cn(
+                                                "bg-background/80 text-foreground backdrop-blur-sm hover:bg-background/95 p-2 h-9 w-9 rounded-full",
+                                                isSubscribed && "bg-primary/20 text-primary hover:bg-primary/30"
+                                            )}
+                                            onClick={handleSubscribeClick}
+                                        >
+                                            {isLoading ? (
+                                                <Loader2 className="w-4 h-4 animate-spin" />
+                                            ) : (
+                                                <Bell className="w-4 h-4" />
+                                            )}
+                                        </Button>
+                                    </TooltipTrigger>
+                                    <TooltipContent>
+                                        {isLoading 
+                                            ? "Processing..." 
+                                            : isSubscribed 
+                                                ? "Unsubscribe from event updates" 
+                                                : "Subscribe to event updates"}
+                                    </TooltipContent>
+                                </Tooltip>
+                            </TooltipProvider>
                         </div>
                         <div className="absolute top-3 left-3">
                             <Badge variant="secondary" className="bg-background/80 text-foreground backdrop-blur-sm">
@@ -212,5 +295,13 @@ export function EventCard({ event, className }: EventCardProps) {
                 </CardContent>
             </Card>
         </Link>
+        
+        {/* Share Dialog */}
+        <EventShareDialog
+            open={isShareDialogOpen}
+            onOpenChange={setIsShareDialogOpen}
+            event={event}
+        />
+        </>
     )
 }

src/app/(home-app)/_components/EventShareDialog.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import * as React from "react";
+import {
+    AlertDialog,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle
+} from "@/components/ui/alert-dialog";
+import { ShareComponent } from "@/components/ui/share/share-component";
+import { EventThumbnailDTO } from "@/types/event";
+
+interface EventShareDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    event: EventThumbnailDTO;
+}
+
+export function EventShareDialog({
+    open,
+    onOpenChange,
+    event
+}: EventShareDialogProps) {
+    const eventUrl = `${typeof window !== 'undefined' ? window.location.origin : 'http://localhost:8090'}/events/${event.id}`;
+
+    const handleCopy = () => {
+        // Optional: handle any additional logic after copying
+        onOpenChange(false); // Close dialog after copying
+    };
+
+    return (
+        <AlertDialog open={open} onOpenChange={onOpenChange}>
+            <AlertDialogContent>
+                <AlertDialogHeader>
+                    <AlertDialogTitle>Share Event</AlertDialogTitle>
+                    <AlertDialogDescription>
+                        Share {event.title} with others.
+                    </AlertDialogDescription>
+                </AlertDialogHeader>
+
+                <div className="py-4">
+                    <ShareComponent
+                        url={eventUrl}
+                        title={event.title}
+                        text={`Check out this event: ${event.title}`}
+                        onCopy={handleCopy}
+                    />
+                </div>
+
+                <AlertDialogFooter>
+                    <AlertDialogCancel>Close</AlertDialogCancel>
+                </AlertDialogFooter>
+            </AlertDialogContent>
+        </AlertDialog>
+    );
+}

src/app/(home-app)/events/[event_id]/_components/SessionItem.tsx

@@ -21,6 +21,7 @@ import {SessionStatus} from "@/types/enums/sessionStatus";
 import {DiscountParameters} from "@/lib/validators/event";
 import {DiscountType} from "@/types/enums/discountType";
 import {Badge} from "@/components/ui/badge";
+import {SessionSubscribeButton} from "@/components/SessionSubscribeButton";
 
 // --- Helper Functions & Constants for Discounts ---
 
@@ -103,7 +104,12 @@ export const SessionItem = ({session}: { session: SessionInfoBasicDTO }) => {
                         <span className="font-semibold text-foreground">{formatDate(session.startTime)}</span>
                         <SessionStatusBadge status={session.status}/>
                     </div>
-                    <div>
+                    <div className="flex items-center gap-2">
+                        <SessionSubscribeButton 
+                            sessionId={session.id} 
+                            sessionTitle={`Session on ${formatDate(session.startTime)}`} 
+                            variant="outline"
+                        />
                         {session.status === SessionStatus.ON_SALE &&
                             <Button onClick={() => router.push(`${window.location.pathname}/${session.id}`)}>
                                 Buy Tickets

src/app/manage/organization/[organization_id]/edit/page.tsx

@@ -9,6 +9,7 @@ import {Skeleton} from "@/components/ui/skeleton";
 import {LogoManagementCard} from "@/app/manage/organization/[organization_id]/edit/_components/LogoManagementCard";
 import {ProfileDetailsCard} from "@/app/manage/organization/[organization_id]/edit/_components/InfoCard";
 import {DangerZoneCard} from "@/app/manage/organization/[organization_id]/edit/_components/DangerZoneCard";
+import {OrganizationSubscribeButton} from "@/components/OrganizationSubscribeButton";
 
 export default function OrganizationSettingsPage() {
     const router = useRouter();
@@ -51,9 +52,15 @@ export default function OrganizationSettingsPage() {
 
     return (
         <div className="p-4 md:p-8 space-y-8">
-            <h1 className="text-3xl font-bold tracking-tight">
-                {organization.name} Settings
-            </h1>
+            <div className="flex justify-between items-center">
+                <h1 className="text-3xl font-bold tracking-tight">
+                    {organization.name} Settings
+                </h1>
+                <OrganizationSubscribeButton 
+                    organizationId={organization.id} 
+                    organizationName={organization.name} 
+                />
+            </div>
 
             <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
                 <div className="lg:col-span-1">

src/app/manage/organization/[organization_id]/event/[eventId]/analytics/_components/SessionPerformanceCard.tsx

@@ -8,7 +8,6 @@ import { formatCurrency } from "@/lib/utils";
 import { ArrowUpRightIcon, ClockIcon, MapPinIcon, UsersIcon } from "lucide-react";
 import { SessionSummary } from "@/types/eventAnalytics";
 import { SessionSummary as OrderSessionSummary } from "@/lib/actions/analyticsActions";
-import { useRouter } from "next/navigation";
 import { SessionDetailDTO } from "@/lib/validators/event";
 import { SessionStatusBadge } from "@/components/SessionStatusBadge";
 import Link from "next/link";
@@ -28,8 +27,6 @@ export const SessionPerformanceCard = ({
   organizationId,
   eventId
 }: SessionPerformanceCardProps) => {
-  const router = useRouter();
-  
   // Basic session info
   const sessionId = session.sessionId;
   const startTime = parseISO(session.startTime);
@@ -52,10 +49,6 @@ export const SessionPerformanceCard = ({
   const location = isOnline 
     ? "Online Event" 
     : sessionMetadata?.venueDetails?.name || "Venue not specified";
-  
-  const handleViewDetails = () => {
-    router.push(`/manage/organization/${organizationId}/event/${eventId}/sessions/${sessionId}/analytics`);
-  };
 
   return (
     <Card className="overflow-hidden hover:shadow-md transition-all">

src/app/manage/organization/[organization_id]/event/[eventId]/analytics/_components/SessionPerformanceGrid.tsx

@@ -18,7 +18,6 @@ export const SessionPerformanceGrid = ({
   isLoading 
 }: SessionPerformanceGridProps) => {
   const [sessionRevenueData, setSessionRevenueData] = useState<OrderSessionSummary[]>([]);
-  const [isRevenueLoading, setIsRevenueLoading] = useState(true);
   const params = useParams();
   const { event } = useEventContext();
 
@@ -30,13 +29,10 @@ export const SessionPerformanceGrid = ({
     const fetchRevenueData = async () => {
       if (eventId) {
         try {
-          setIsRevenueLoading(true);
           const data = await getSessionsRevenueAnalytics(eventId);
           setSessionRevenueData(data.sessions);
         } catch (error) {
           console.error("Error fetching session revenue data:", error);
-        } finally {
-          setIsRevenueLoading(false);
         }
       }
     };

src/app/manage/organization/[organization_id]/event/[eventId]/discounts/_components/DiscountUsageChart.tsx

@@ -199,7 +199,7 @@ export const DiscountUsageChart: React.FC<DiscountUsageChartProps> = ({ data })
                 layout="horizontal" 
                 verticalAlign="bottom" 
                 align="center" 
-                formatter={(value, entry) => (
+                formatter={(value) => (
                   <span className="text-xs text-foreground">
                     {value}
                   </span>

src/app/manage/organization/[organization_id]/event/[eventId]/orders/page.tsx

@@ -36,7 +36,7 @@ export default function OrdersPage() {
   const [statusFilter, setStatusFilter] = useState("all");
   const [currentSession, setCurrentSession] = useState<string | null>(null);
   const [currentPage, setCurrentPage] = useState(1);
-  const [pageSize, setPageSize] = useState(10);
+  const pageSize = 10;
   const [totalOrders, setTotalOrders] = useState(0);
 
   // Get session ID from URL if present

src/app/manage/organization/[organization_id]/event/[eventId]/sessions/[sessionId]/_components/SessionHeader.tsx

@@ -5,7 +5,6 @@ import { format } from 'date-fns';
 import { LinkIcon, MapPin, Share2, Trash2 } from 'lucide-react';
 import { Button } from "@/components/ui/button";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
-import { useParams } from 'next/navigation';
 
 interface SessionHeaderProps {
     title: string;
@@ -26,8 +25,6 @@ export const SessionHeader: React.FC<SessionHeaderProps> = ({
     onShare,
     onDelete
 }) => {
-    const params = useParams();
-    const backUrl = `/manage/organization/${params.organization_id}/event/${params.eventId}/sessions`;
     return (
         <div className="space-y-4">            
             <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">

src/app/manage/organization/my-organizations/page.tsx

@@ -21,6 +21,7 @@ import {DeleteOrganizationDialog, CreateOrganizationDialog} from "@/components/O
 import {useRouter} from "next/navigation";
 import {Avatar, AvatarFallback, AvatarImage} from "@/components/ui/avatar"
 import Link from "next/link";
+import {OrganizationSubscribeButton} from "@/components/OrganizationSubscribeButton";
 
 
 export default function OrganizationsPage() {
@@ -111,6 +112,18 @@ export default function OrganizationsPage() {
                                 >
                                     Copy organization ID
                                 </DropdownMenuItem>
+                                <DropdownMenuItem
+                                    onClick={(e) => {
+                                        e.stopPropagation();
+                                    }}
+                                >
+                                    <OrganizationSubscribeButton
+                                        organizationId={organization.id}
+                                        organizationName={organization.name}
+                                        variant="default"
+                                        className="w-full justify-start px-0"
+                                    />
+                                </DropdownMenuItem>
                                 <DropdownMenuItem onClick={() => {
                                     router.push(`/manage/organization/${organization.id}/edit`);
                                 }}>