Creating tickets-QR code

app/actions/getTicketDetails.ts

@@ -0,0 +1,39 @@
+import prisma from '@/app/libs/prismadb'; // Adjust this import according to your file structure
+
+interface TicketDetails {
+  userId: number;
+  eventId: number;
+  name?: string | null;
+  member1?: string | null;
+  member2?: string | null;
+  member3?: string | null;
+}
+
+export async function getTicketDetails(userId: number, eventId: number): Promise<TicketDetails | null> {
+  try {
+    const ticket = await prisma.ticket.findFirst({
+      where: {
+        userId: userId,
+        eventId: eventId,
+      }
+    });
+
+    if (!ticket) {
+      console.log(`Ticket not found for userId: ${userId} and eventId: ${eventId}`);
+      return null;
+    }
+
+    return {
+      userId: ticket.userId,
+      eventId: ticket.eventId,
+      name: ticket.name,
+      member1: ticket.member1,
+      member2: ticket.member2,
+      member3: ticket.member3,
+
+    };
+  } catch (error) {
+    console.error('Error retrieving ticket details:', error);
+    throw error;
+  }
+}

app/events/[eventId]/EventClient.tsx

@@ -19,6 +19,7 @@ import { checkoutOrder } from "@/app/actions/order.actions";
 import toast from "react-hot-toast";
 import axios from "axios";
 import { useRouter } from "next/navigation";
+import useTicketModal from "@/app/hooks/useTicketModal";
 
 interface EventClientProps {
     registrations?: Registration[];
@@ -53,6 +54,8 @@ const EventClient: React.FC<EventClientProps> = ({
     const [isLoading, setIsLoading] = useState(true);
     const router = useRouter();
 
+    const ticketModal = useTicketModal();
+
     const handleOpen = () => {
         console.log('clicked');
         incompleteModal.onOpen();
@@ -115,11 +118,19 @@ const EventClient: React.FC<EventClientProps> = ({
             });
     };
 
+
+
+
     const category = useMemo(() => {
         return categories.find((item) => 
         item.label === event.category);
     }, [event.category])
 
+
+    const viewTicket = (() => {
+        ticketModal.onOpen();
+    })
+
     // let likedBy = [...(event?.likedBy || [])];
     const coordinates: [number, number] = [40.748817, -73.985428];
 
@@ -189,26 +200,13 @@ const EventClient: React.FC<EventClientProps> = ({
                                         label='Cancel'
                                         onClick={handleCancelRegistration}
                                     />
-                                    {(event.paidEvent == true) ? (
-                                        <form action={onCheckout} method="post">
-                                            <Button
-                                                label='Pay'
-                                                onClick={() => {}}
-                                                outline
-                                            />
-                                        </form>
-
-                                    ) : (
-                                        <Button
-                                            label='Generate Ticket'
-                                            onClick={() => {}}
+                                    <Button
+                                            label='View Ticket'
+                                            onClick={viewTicket}
                                             outline
                                         />
-                                    )
-
-                                    }
 
-                                </div>
+                                    </div>
 
                                 ) : (
                                 <Button

app/events/[eventId]/EventClient2.tsx

@@ -22,6 +22,7 @@ import ColorThief from 'colorthief';
 import axios from "axios";
 import toast from "react-hot-toast";
 import { useRouter } from "next/navigation";
+import useTicketModal from "@/app/hooks/useTicketModal";
 
 interface EventClient2Props {
     registrations?: Registration[];
@@ -30,6 +31,7 @@ interface EventClient2Props {
     };
     currentUser?: SafeUser | null;
     isRegistered?: boolean;
+    ticketData: any;
 }
 
 
@@ -38,7 +40,8 @@ loadStripe(process.env.NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY!);
 const EventClient2: React.FC<EventClient2Props> = ({
     event,
     currentUser,
-    isRegistered
+    isRegistered,
+    ticketData
 
 }) => {
 
@@ -59,7 +62,7 @@ const EventClient2: React.FC<EventClient2Props> = ({
     const imageRef = useRef<HTMLImageElement>(null);
     const [isLoading, setIsLoading] = useState(false);
     const router = useRouter();
-
+    const ticketModal = useTicketModal();
 
 
 
@@ -171,6 +174,10 @@ const EventClient2: React.FC<EventClient2Props> = ({
 
 
 
+    const viewTicket = (() => {
+        console.log(ticketData);
+        ticketModal.onOpen();
+    })
 
 
 
@@ -249,8 +256,8 @@ const EventClient2: React.FC<EventClient2Props> = ({
                             {isRegistered ? (
                                 <Button
                                     disabled={false}
-                                    label='Generate ticket'
-                                    onClick={() => {}}
+                                    label='View ticket'
+                                    onClick={viewTicket}
                                     outline
                                 />
                             ) : (

app/events/[eventId]/TicketModal.tsx

@@ -0,0 +1,49 @@
+"use client"
+
+import Modal from "../../components/modals/Modal";
+import Heading from "../../components/Heading";
+import Lottie from "lottie-react";
+import animationData from '../../../public/assets/animation_ln457zq4.json'
+import useTicketModal from "@/app/hooks/useTicketModal";
+import { SafeEvent, SafeUser } from "@/app/types";
+
+interface TicketModalProps {
+    currentUser?: SafeUser | null;
+    currEvent?: SafeEvent | null;
+    qrUrl?: any;
+}
+
+const TicketModal: React.FC<TicketModalProps> = ({
+    currentUser,
+    currEvent,  
+    qrUrl  
+}) => {
+    const ticketModal = useTicketModal();
+
+    const bodyContent = (
+        <div className='flex flex-col gap-4'>
+            <Heading
+                title='Show this during entry'
+                center
+            />
+            <div className="flex items-center justify-center">
+                <img src={qrUrl} alt="Ticket QR Code" />
+            </div>
+        </div>
+    )
+
+    return ( 
+        <div>
+            <Modal
+                isOpen = {ticketModal.isOpen}
+                title= {`Your ticket for ${currEvent?.title}`}
+                actionLabel='Okay'
+                onClose={ticketModal.onClose}
+                onSubmit={ticketModal.onClose}
+                body={bodyContent}
+            />
+        </div>
+     );
+}
+
+export default TicketModal;

app/events/[eventId]/layout.tsx

@@ -7,6 +7,9 @@ import LocoScroll from "@/app/components/LocoScroll";
 import Incomplete from "@/app/components/modals/Incomplete";
 import { SafeUser } from "@/app/types";
 import getCurrentUser from "@/app/actions/getCurrentUser";
+import TicketModal from "@/app/events/[eventId]/TicketModal";
+import { getTicketDetails } from "@/app/actions/getTicketDetails";
+import generateQRCode from "@/app/utils/generateQRCode";
 
 interface IParams {
     eventId?: string;
@@ -22,6 +25,9 @@ const MainLayout = async ({
     const event = await getEventById(params);
     let users: SafeUser[] = [];
     const currentUser = await getCurrentUser();
+    //@ts-ignore
+    const ticket = await getTicketDetails(currentUser?.id, event?.id);
+    const qrUrl = await generateQRCode(ticket);
 
 
     // if (likedBy && likedBy.length > 0) {
@@ -47,6 +53,7 @@ const MainLayout = async ({
                 {/* <LikesModal 
                     likedBy={users}
                 /> */}
+                <TicketModal currEvent={event} currentUser={currentUser} qrUrl={qrUrl}/>
                 <Incomplete/>
                 <LocoScroll>
                 {children}

app/events/[eventId]/page.tsx

@@ -5,7 +5,8 @@ import getCurrentUser from "@/app/actions/getCurrentUser";
 import getUserById from "@/app/actions/getUserById";
 import getRegistrationData from "@/app/actions/getRegistrationDetails";
 import EventClient2 from "./EventClient2";
-
+import { getTicketDetails } from "@/app/actions/getTicketDetails";
+import generateQRCode from "@/app/utils/generateQRCode";
 
 interface IParams {
     eventId?: string;
@@ -19,6 +20,9 @@ const EventPage = async (
 
     //@ts-ignore
     const registered = await getRegistrationData(event?.id);
+    //@ts-ignore
+    const ticket = await getTicketDetails(currentUser?.id, event?.id);
+    const qrUrl = await generateQRCode(ticket);
 
     console.log("Drive")
     if (!event) {
@@ -42,6 +46,7 @@ const EventPage = async (
                     isRegistered={registered}
                     event={event}
                     currentUser={currentUser}
+                    ticketData={qrUrl}
                 />
             </div>
      </>

app/hooks/useTicketModal.ts

@@ -0,0 +1,16 @@
+import { create } from 'zustand';
+
+interface TicketModalSTore {
+  isOpen: boolean;
+  onOpen: () => void;
+  onClose: () => void;
+}
+
+const useTicketModal = create<TicketModalSTore>((set) => ({
+  isOpen: false,
+  onOpen: () => set({ isOpen: true }),
+  onClose: () => set({ isOpen: false })
+}));
+
+
+export default useTicketModal;

app/utils/generateQRCode.ts

@@ -0,0 +1,13 @@
+import QRCode from 'qrcode';
+
+const generateQRCode = async (ticketDetails: any) => {
+  try {
+    const serializedTicketDetails = JSON.stringify(ticketDetails);
+    const qrCodeDataURL = await QRCode.toDataURL(serializedTicketDetails);
+    return qrCodeDataURL;
+  } catch (error) {
+    console.error('Error generating QR code:', error);
+    return null;
+  }
+};
+export default generateQRCode;